reactjs_reactjs教程 - CSDN
精华内容
参与话题
  • 自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的...

    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    一、ReactJS简介

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    1、ReactJS的背景和原理

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    2、组件化

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    072132381261891600.jpg

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    QQ截图20150721110651.png

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    QQ截图20150721111143.png

    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。

     

    到这里,恭喜,你已经步入了ReactJS的大门~~下面,让我们来进一步学习ReactJs吧~~

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    QQ截图20150721111531.png

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    QQ截图20150721111639.png

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    QQ截图20150721111724.png

    显示结果如下:

    QQ截图20150721111738.png

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的"真功夫"了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

    前面说了,ReactJS是基于组件化的开发,下面我们开始来学习ReactJS里面的组件,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

    QQ截图20150721111858.png

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    QQ截图20150721112014.png

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    072305421429007.gif

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM

    • Updating:正在被重新渲染

    • Unmounting:已移出真实 DOM

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    • componentWillMount()

    • componentDidMount()

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

    • componentWillUnmount()

    此外,React 还提供两种特殊状态的处理函数。

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    下面来看一个例子:

    QQ截图20150721112254.png

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    QQ截图20150721112325.png

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    七、参考资料

    React中文文档 

    React入门实例教程

    颠覆式前端UI开发框架:React

    展开全文
  • react.js从入门到精通(一)

    千次阅读 2018-08-11 10:00:21
    web端三大框架react、vue和angular,下面是对react.js的一些总结。 一、环境搭建 1、npm搭建项目 推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,...

    web端三大框架react、vue和angular,下面是对react.js的一些总结。

    一、环境搭建

    1、npm搭建项目

    推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,有些模块无法下载或无法正常使用)。

    cnpm install -g create-react-app
    create-react-app my-app
    cd my-app
    npm start
    • 1
    • 2
    • 3
    • 4

    打开浏览器,输入http://localhost:3000可以看到系统默认生成的页面了。 
    这里写图片描述

    2、推荐使用的项目结构

    https://git.coding.net/yibingCoding/ReactLearn.git 
    可以通过git clone方式下载项目结构。

    二、目录结构与各文件功能

    1、目录结构

    这里写图片描述 
    1、index.html文件为项目的总入口,CDN引入的资源可以放在此文件中。 
    2、package.json文件是模块功能配置,使用npm install可生成node_modules文件夹,所有模块功能所需要的资源都存储在这个文件夹中。 
    3、routes.js文件是路由配置文件,路由功能是三大前端框架的特色(具体用法下面会详细说)。 
    4、Home.js文件是项目结构初始化放上去的界面。

    三、react.js的第一个dome

    在Home.js中编写代码,代码如下:

    import React,{ Component } from 'react'
    import demo1Image from '../../image/demo1Image.jpg';
    class Home extends Component {
      render() {
        return (
          <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
            这是第一个demo
            <img src={demo1Image} style={{width:"300px",height:"300px"}} alt=""/>
          </div>
        )
      }
    }
    export default Home
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    效果如下: 
    这里写图片描述

    展开全文
  • ReactJS中文基础视频教程(打包下载)ReactJS视频教程下载ReactJS基础视频教程
  • reactJS 干货(reactjs 史上最详细的解析干货)

    万次阅读 多人点赞 2020-09-30 11:25:28
    一. State和 Props state是状态机。 应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。 不应该包括:计算所得数据、React组件(在...

     

    一.  State和 Props

          state是状态机。

          该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。

          不应该包括:计算所得数据、React组件(在render()里使用props和state来创建它)、基于props的重复数据(尽可能保持用props来做作为唯一的数据来源,把props保存到state中的有效的场景是需要知道它以前的值得时候,因为未来的props可能会变化)。

          props: 父级向子级传递数据的方式。

         

    二.  有状态组件和无状态组件(纯函数组件)

          有状态组件 : 通过React.createClass或者es6的class继承React.Component创建的组件。特性:具备完整的生命周期及实例化过程、支持this及ref指向.

          无状态组件:  即statelesscomponent( pure function Component)。以函数返回值方式方式创建的组件。特点: 无实例化过程及生命周期、无this及ref指向、函数接受props及context两个参数。

          实践模式

          创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props传给子级。有状态的组件封装了所有的用户交互逻辑,state中处理状态的变化, 而这些无状态组件只负责声明式地渲染数据.

     

    三.  受控组件、非受控组件及混合组件

          有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>。这些组件可以通过输入一些内容或者设置元素的value属性来改变组件的值。但是,因为React是单向数据流绑定的,这些组件可能会变得失控:

          1.一个维护它自己state里的value值的<Input>组件无法从外部被修改

          2.一个通过props来设置value值的<Input>组件只能通过外部控制来更新。

     

          受控组件:    一个受控的<input>应该有一个value属性。渲染一个受控的组件会展示出value属性的值。 
          一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props。也就是说,如果我们有一个通过props来设置value的<input>组件,不管你如何输入,它都只会显示props.value。换句话说,你的组件是只读的。 在处理一个受控组件的时候,应该始终传一个value属性进去,并且注册一个onChange的回调函数让组件变得可变.

          非受控组件:     一个没有value属性的<input>就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来。非受控的<input>只能通过OnChange函数来向上层通知自己被用户输入的更改。

          混合组件:   同时维护props.value和state.value的值。props.value在展示上拥有更高的优先级,state.value代表着组件真正的值。

          目的:

           1、支持传入值; 
                  2、可控:组件外部修改props可改变input组件的真实值及显示值; 
                  3、非可控:输入框中输入值,可同时改变input组件的真实值及显示值。

     

     

    四.  redux和dva

          Redux

          1.Actions、Reducers 和 Store

          action可以理解为应用向 store 传递的数据信息(一般为用户交互信息)。在实际应用中,传递的信息可以约定一个固定的数据格式,比如: Flux Standard Action。 dispatch(action) 是一个同步的过程:执行 reducer 更新 state -> 调用 store 的监听处理函数。如果需要在 dispatch 时执行一些异步操作(fetch action data),可以通过引入 Middleware 解决。

     

          reducer实际上就是一个函数:(previousState, action) => newState。用来执行根据指定 action 来更新 state 的逻辑。reducer 不存储 state, reducer 函数逻辑中不应该直接改变 state 对象, 而是返回新的state 对象。

         

          store是一个单一对象,redux中只有唯一一个store实例。主要作用:

               1.管理应用的 state

               2.通过 store.getState() 可以获取 state

               3.通过 store.dispatch(action) 来触发state 更新

               4.通过 store.subscribe(listener) 来注册state 变化监听器

     

     

     

     

    b. Dva

     数据流向

    数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。

     

     

     

     

     

     

    Models

    State

    type State= any

    State 表示 Model的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutabledata)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

    在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state数据,但是通常你很少会用到:

    constapp=dva();
    console.log(app._store); // 顶部的 state 数据

    Action

    typeAsyncAction = any

    Action 是一个普通 javascript对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

    dispatch({
      type: 'add',
    });

    dispatch 函数

    typedispatch = (a: Action) => Action

    dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。

    在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者Effects,常见的形式如:

    dispatch({
      type:'user/add', // 如果在 model 外调用,需要添加 namespace
      payload: {}, // 需要传递的信息
    });

    Reducer

    typeReducer<S, A> = (state: S, action: A) => S

    Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

    Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中:

    [{x:1},{y:2},{z:3}].reduce(function(prev, next){
        returnObject.assign(prev, next);
    })
    //return {x:1, y:2, z:3}

    在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutabledata,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。

    Effect

    Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

    dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostlyadequate guide to FP,或者它的中文译本JS函数式编程指南

    Subscription

    Subscriptions 是一种从  获取数据的方法,它来自于 elm

    Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

    importkeyfrom'keymaster';
    ...
    app.model({
      namespace:'count',
      subscriptions: {
        keyEvent(dispatch) {
          key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
        },
      }
    });
    
     

    Router

    这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 HistoryAPI 可以监听浏览器url的变化,从而控制路由相关操作。

    dva 实例提供了 router方法来控制路由,使用的是react-router

    
    
    import { Router, Route } from'dva/router';
    app.router(({history}) =>
      <Router history={history}>
        <Route path="/" component={HomePage} />
      </Router>
    );
    
     

    RouteComponents

    组件设计方法中,我们提到过Container Components,在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。

    所以在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。

    五.  hoc

          HOC(全称Higher-ordercomponent)是一种React的进阶使用方法,主要还是为了便于组件的复用。HOC就是一个方法,获取一个组件,返回一个更高级的组件。

          在React开发过程中,发现有很多情况下,组件需要被"增强",比如说给组件添加或者修改一些特定的props,一些权限的管理,或者一些其他的优化之类的。而如果这个功能是针对多个组件的,同时每一个组件都写一套相同的代码,明显显得不是很明智,所以就可以考虑使用HOC。

          一个最简单的HOC实现是这个样子的:

     

     

    HOC可以做什么?

          代码复用,代码模块化

          增删改props

          渲染劫持

          增删改props

          可以通过对传入的props进行修改,或者添加新的props来达到增删改props的效果。

          比如你想要给wrappedComponent增加一个props,可以这么搞:

     

     

    这样,你就可以在你的组件中使用message这个props:

     

    渲染劫持

          这里的渲染劫持并不是你能控制它渲染的细节,而是控制是否去渲染。由于细节属于组件内部的render方法控制,所以你无法控制渲染细节。

          比如,组件要在data没有加载完的时候,现实loading...,就可以这么写:

     

     

    这个样子,在父级没有传入data的时候,这一块儿就只会显示loading...,不会显示组件的具体内容

     

     

     

    六. 项目中的实践

          1.合理使用有状态组件及无状态组件。在使用redux或者dva的场景下,理论上所有的组件都可以封装为无状态组件(少数需要生命周期控制或者上文提到的混合式组件除外),model中封装数据、异步effects及同步reducers,通过connect绑定到对应的组件上。

          最佳实践: router中getcomponent中定义的组件我们称之为路由组件,一般路由组件会通过connect绑定model中定义的state及组件中定义的方法到该组件的props上。其他方式定义的为非路由组件,非路由组件尽量避免使用connect,而是通过路由组件或者其他上层通过props传递数据进行渲染。

          2.理解subscription, effects及reducers中各自的功能职责。

          3.package.json中定义的dependency,需要深入研究,避免重复造轮子。

          4.全局观及合理的组件规划。

     

    展开全文
  • 一看就懂的ReactJs教程

    千次阅读 2016-09-11 15:43:06
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的...

    072107184074806.png


    现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略
    ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~

    一、ReactJS简介

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

    ReactJS官网地址:http://facebook.github.io/react/

    Github地址:https://github.com/facebook/react

    二、对ReactJS的认识及ReactJS的优点

    首先,对于React,有一些认识误区,这里先总结一下:

    • React不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;

    • React的服务器端Render能力只能算是一个锦上添花的功能,并不是其核心出发点,事实上React官方站点几乎没有提及其在服务器端的应用;

    • 有人拿React和Web Component相提并论,但两者并不是完全的竞争关系,你完全可以用React去开发一个真正的Web Component;

    • React不是一个新的模板语言,JSX只是一个表象,没有JSX的React也能工作。

    1、ReactJS的背景和原理

    在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。

    借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。

    2、组件化

    虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑,同时也带来了组件化开发的思想,所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。例如,Facebook的instagram.com整站都采用了React来开发,整个页面就是一个大的组件,其中包含了嵌套的大量其它组件,大家有兴趣可以看下它背后的代码。

    如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

    对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。

    对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

    在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

    072132381261891600.jpg

    React认为一个组件应该具有如下特征:

    (1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;

    (2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;

    (3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

    三、下载ReactJS,编写Hello,world

    ReactJs下载非常简单,为了方便大家下载,这里再一次给出下载地址(链接),下载完成后,我么看到的是一个压缩包。解压后,我们新建一个html文件,引用react.js和JSXTransformer.js这两个js文件。html模板如下(js路径改成自己的):

    QQ截图20150721110651.png

    这里大家可能会奇怪,为什么script的type是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供两个库: react.js 和 JSXTransformer.js ,它们必须首先加载。其中,JSXTransformer.js 的作用是将 JSX 语法转为 JavaScript 语法。这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

    到这里我们就可以开始编写代码了,首先我们先来认识一下ReactJs里面的React.render方法:

    React.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

    QQ截图20150721111143.png

    这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。

    然后,在浏览器打开这个页面,就可以看到浏览器显示一个大大的Hello,world,因为我们用了

    标签。

    到这里,恭喜,你已经步入了ReactJS的大门~~下面,让我们来进一步学习ReactJs吧~~

    四、Jsx语法

    HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写,了解过AngularJs的看到下面的代码一定会感觉很熟悉的,我们来看代码:

    QQ截图20150721111531.png

    这里我们声明了一个names数组,然后遍历在前面加上Hello,输出到DOM中,输出结果如下:

    QQ截图20150721111639.png

    JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员,代码如下:

    QQ截图20150721111724.png

    显示结果如下:

    QQ截图20150721111738.png

    这里的星号只是做标识用的,大家不要被迷惑了~~

    你看到这里,说明你对React还是蛮感兴趣的,恭喜你,坚持下来了,那么下面,我们开始学习React里面的"真功夫"了~~ Are you ready?

    五、ReactJS组件

    1、组件属性

    前面说了,ReactJS是基于组件化的开发,下面我们开始来学习ReactJS里面的组件,React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

    下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

    QQ截图20150721111858.png

    看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:

    1)获取属性的值用的是this.props.属性名

    2)创建的组件名称首字母必须大写。

    3)为元素添加css的class时,要用className。

    4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。

    2、组件状态

    组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框的编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码:

    QQ截图20150721112014.png

    这里,我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行,必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值,这里我们将enable这个值跟input的disabled绑定,当要修改这个属性值时,要使用setState方法。我们声明handleClick方法,来绑定到button上面,实现改变state.enable的值。效果如下:

    072305421429007.gif

    原理分析:

    当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

    这里值得注意的几点如下:

    1)getInitialState函数必须有返回值,可以是NULL或者一个对象。

    2)访问state的方法是this.state.属性名。

    3)变量用{}包裹,不需要再加双引号。

    3、组件的生命周期

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM

    • Updating:正在被重新渲染

    • Unmounting:已移出真实 DOM

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    • componentWillMount()

    • componentDidMount()

    • componentWillUpdate(object nextProps, object nextState)

    • componentDidUpdate(object prevProps, object prevState)

    • componentWillUnmount()

    此外,React 还提供两种特殊状态的处理函数。

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    下面来看一个例子:

    QQ截图20150721112254.png

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    4、组件的嵌套

    React是基于组件化的开发,那么组件化开发最大的优点是什么?毫无疑问,当然是复用,下面我们来看看React中到底是如何实现组件的复用的,这里我们还写一个例子来说吧,代码如下:

    QQ截图20150721112325.png

    这里我们创建了一个Search组件,然后又创建了一个Page组件,然后我们在Page组件中调用Search组件,并且调用了两次,这里我们通过属性searchType传入值,最终显示结果如图:

    六、ReactJS小结

    关于ReactJS今天就先学习到这里了,下面来总结一下,主要有以下几点:

    1、ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

    2、可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件(留给大家研究);要对某些值的变化做DOM操作的,要把这些值放到state中。

    3、为组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

    4、组件名称首字母必须大写。

    5、变量名用{}包裹,且不能加双引号。

    七、参考资料

    React中文文档 

    React入门实例教程

    颠覆式前端UI开发框架:React


    展开全文
  • Reactjs 入门实例教程

    2016-07-30 20:31:51
    现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。...React 起源于 Facebook 的内部项目,因为该公司对市场上...
  • 什么是React.js

    千次阅读 2018-09-19 15:39:16
    React作为JavaScript库的三大主流框架之一,值得前端工程师的进一步学习与探讨。 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。...
  • 推荐几款ReactJS最优秀的UI框架

    万次阅读 2018-07-06 08:42:26
    使用优秀的UI框架来构建你的ReactJS应用。Material-UI一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。查看地址:...
  • dva2.x基础视频教程

    千人学习 2019-06-27 11:04:23
    基于 redux、redux-saga 和 react-router 的轻量级前端框架。
  • 课程概述: React是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。...
  • React服务器端渲染及Next.js实战

    千人学习 2019-04-26 23:51:15
    Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护。 介绍服务器端渲染原理,深入浅出的讲解nuxt框架的使用。掌握服务器端渲染原理,...
  • React前端框架/进阶篇

    千人学习 2019-01-30 17:45:42
    React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React 拥有较高的性能,代码...
  • 这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分: ...学习如何搭建react项目,以及react组件,jsx语法、css...
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 错误信息为: 分析:是因为我用到了id为question的dom元素,而项目中并未获得这个dom元素。 解决方案: 在authLevel这个变量获取之后,再去渲染该dom元素,...
  • reactjs 视频教程

    千次阅读 2015-07-07 13:06:47
    最近玩了一下react,感觉挺不错的,搜了一下没有看到什么视频教程,于是自己便录制了几个入门视频,希望可以帮到大家,已经上传土豆了,可以点击下面的链接查看。...
  • Error: Minified React error #... visit http://reactjs.org/docs/error-decoder.html?invariant=185 for the full message or use the non-minified dev environment for full errors and additional helpful war...
  • 选择ReactJS的五个理由

    千次阅读 2016-10-22 15:49:45
    ReactJS(https://reactjs.net/)是由顶尖的IT公司Facebook和Instagram协同开发者社区维护的一个开源Javascript库。这个框架现在被广泛地应用于开发Web应用程序的用户界面。最初开发这个特别框架的目标是“搭建数据...
  • React Hooks + express + mockjs 前后端列表分页实战课程,前后端实战课程,大喵将带着大家手写每一行代码,满满的全是干货哟 ~
  • 本文是第一篇,介绍用ReactJS开发时遇到的种种问题。后面四篇文章的每一篇将会分别详细讨论其中一个问题,以及Binding.scala如何解决这个问题。 背景介绍 去年 4 月,我第一次在某个客户的项目中接触到ReactJS...
  • 问题一:ReactJS组件难以在复杂交互页面中复用 ReactJS中的最小复用单位是组件。ReactJS的组件比AngularJS的Controller和View 要轻量些。每个组件只需要前端开发者提供一个 render 函数,把 props 和 state 映射...
1 2 3 4 5 ... 20
收藏数 15,310
精华内容 6,124
关键字:

reactjs