一、react是什么？

React是一个 JavaScript 库 ，可用来创建用户界面的，可认为是MVC 中的V（视图）。
React是 基于Component 的，即组件，React认为一切页面元素都可以抽象成组件，且大部分操作都是针对组件的。

1.1 React诞生背景

传统的DOM（文件对象模型）操作会对整个DOM树进行重新渲染，时间成本、复杂度高，很慢且容易造成卡顿使页面短暂失去响应。
为解决DOM操作慢的问题，React引入虚拟DOM，比较新的与旧的虚拟DOM节点之间的差异，最后将diff反映到真实DOM，尽可能减少重绘，提高性能。

1.2 React优势与特点

  频繁操作DOM代价是昂贵的，React之所以快，是因为它一般不直接操作DOM。React将DOM结构存储在内存中，然后同组件render()的返回内容进行比较，计算出需要改动的地方，最后才反映到真实DOM中。React的优势、特点如下：

组件可复用性和扩展性好，开发效率提高
不直接操作DOM ，先在虚拟DOM中计算变化，最后将diff反应到真实的DOM中，尽可能减少重绘，提高性能。
基于状态实现对DOM控制和渲染 ，是React 的一大创新，将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

1.3 虚拟DOM原理

React将新的虚拟DOM（由组件的render方法返回，也就是真实DOM未来要显示的模样）与旧的虚拟DOM（结构、数据与当前的真实DOM一致）做比较，生成差异diff，并将diff应用到当前真实的DOM中，当前真实DOM更新为新的真实DOM（结构、数据与新的虚拟DOM一致）

注意：

在React中，开发者只需要在组件的render方法中返回新的虚拟DOM就可以了，具体真实DOM与虚拟DOM如何做对比生成diff，以及真实DOM如何通过最快的路径渲染出变动的部分，均由React来完成，不用开发者操心。

虚拟DOM原理图

虚拟DOM原理

使用虚拟DOM需注意

组件（component）是虚拟 DOM ，并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构。只有当它插入文档以后，才会变成真实的 DOM节点，大部分情况下，我们都是在 构建React的组件，也就是操作虚拟DOM ，components 的存在让计算 DOM diff 更高效。
为了同浏览器交互，我们有时候需要获取到 真实的DOM节点 。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。
React.findDOMNode()只在mounted组件中调用，mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常，是因为 render返回的是虚拟dom ，并没有被渲染到真实dom中。

二、组件类的定义

本文基于ES6语言标准创建名为Timer组件，保存为timer.js文件，示例代码如下图所示，主要包含 三个部分 ：

变量声明、引入外部依赖 －import
定义组件类 －class
组件输出 －export

"use strict";
import './timer.less';//css样式文件
import React from 'react';
import ReactDOM from 'react-dom';

class Timer extends React.Component {
    /*可在组件类中重写组件的构造函数、各生命周期函数等覆盖掉
      React.Component中默认的方式，不重写则按默认方式*/
    /*render方法每个组件一定要有*/
    render () {
      return (
        <button className = "ban-content" >
     React has been running for 5 seconds.
        </button>
      );
    }
}

export default Timer;

2.1 引入该组件依赖的模块／库－import：

引入依赖库／其他组件时，ES6语言标准与python语法比较类似，还可以给引入的模块取别名，格式为：

 import 库名
 import 其他组件名 from 组件路径
 import 模块名 from 库名
 import 模块名 from 库名 as 模块别名

示例代码中 引入外部依赖 ：

"use strict";
import './timer.less';//引入css样式文件
import React from 'react';
import ReactDOM from 'react-dom';

常用依赖库

react.js － React 的核心库（常用模块 React.Component ）
react-dom.js －提供与 DOM 相关的功能（常用模块 ReactDOM.render 和 ReactDOM.findDOMNode ）

2.2 定义组件－class：

组件class内的函数组成结构主要包含生命周期函数、render方法以及自定义函数3部分，具体结构如下图：

组件class内的函数组成结构

自定义组件Timer（包含全部生命周期函数＋render方法）的示例代码（非完整代码）如下：

class Timer extends React.Component {
   /*组件创建并首次渲染到真实dom中会调用以下三个生命周期函数＋render方法，仅调用一次，称为创建期（Mount）*/
   constructor(props) {
          super(props);
          this.state = { seconds: 0, buttoncolor: ''}; }
   componentWillMount() { }
   componentDidMount() { }
   /*组件被实例化之后（组件已在真实dom中），组件与用户交互过程中，组件属性或状态改变时会调用以下三个生命周期函数＋render方法，可重复调用，更新dom，称为更新期（Update）*/
   componentWillReceiveProps(nextProps) { } 
   shouldComponentUpdate(nextProps, nextState) { }
   componentWillUpdate(nextProps, nextState) { }
   componentDidUpdate(preProps, preState) { }
   /*组件要从真实dom中移除时调用，称为销毁期（Unmount）*/
   componentWillUnmount() { }
   /*render方法返回虚拟dom，用于与真实dom（即旧的虚拟dom）做diff，在组件创建期（Mount）、更新期（Update）均会被调用*/
   render () {
     return (
       <button className = "ban-content" >
    React has been running for {this.state.seconds} seconds.
       </button>
     );
   }
}

2.2.1组件的父类－React.Component

由上图可知组件：

组件可以认为是 继承自父类React.Component的一个子类
组件 拥有父类React.Component的一些方法，如各种生命周期函数＋render方法
组件 可定义其私有的方法 供组件内部使用
格式：方法名（参数）｛函数体代码｝

2.2.2 组件中的生命周期函数重写－可写可不写

组件定义时，依据组件的功能设计，生命周期函数可选择性写也可以不写
若 重写生命周期函数，被重写的函数会覆盖掉从父类React.Component继承过来的生命周期函数
若 不重写生命周期函数，则默认使用从父类React.Component继承过来的生命周期函数

2.2.3 组件中的render方法－一定要有

组件的render方法主要用来返回组件的dom结构，有如下几个特点：

组件中的render方法继承自 React.Component ，是每个组件 一定要有 的，用于输出组件。
render方法返回的是一个 虚拟dom 节点，是一个 javascript对象 ，该对象的结构与dom节点结构类似，其返回值可以是 null、false或React组件
render方法只负责返回虚拟dom来告诉React新的dom应该长什么样，至于虚拟dom和真实dom如何做diff，以及如何高效地将变化渲染到真实dom则由React来完成，无需程序员操作
render方法在组件 创建期 （仅一次）、 更新期 （可重复）均会被调用，且在更新期时，组件的属性（this.props）或状态（this.state）的变化都有可能触发render方法的调用

此外，render方法应该是纯粹的，也就是说在该方法中不修改组件state，不读写 DOM 信息，也不和浏览器交互（例如使用 setTimeout）。如果需与浏览器交互，在componentDidMount() 中或者其它生命周期方法中做这件事。保持render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。使用render方法时，需注意以下几点：

render方法中 this.pops和this.state是只读的， 不能修改组件state
只能返回一个顶级组件 ，不能返回一组元素

返回2个顶级元素错误写法

返回两个元素的正确写法

render方法中 不能调用React.findDOMNode() ，否则抛出异常，因为React.findDOMNode()是对真实dom的操作， render方法只是虚拟dom

2.2.4 React独有的JSX语法－可用可不用，建议用

JSX官方中文介绍
JSX是一种特殊的js语法，可以在JavaScript代码中直接使用html标签。JSX语法是可选的，也就是说你也可以不使用，直接写JavaScript原生代码，但是建议使用，因为很方便。

JSX中组件的属性值

值为字符串

若是在标签的<>内，则加""；若在标签对中间，则无需加""，例如：

<p className="值为字符串"> 值为字符串 </p>

值为JavaScript表达式

要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 {}包起来，不要用引号 ""，其中style属性对于JSX来说第一是变量，第二是对象，因此要两个花括号，例如：

<p> {this.props.content} </p>
<div style={{display: question_display}}>
       this is {this.props.content}
</div>
<div style={{display: "none"}}> </div>

值为布尔值

布尔值被认为是JavaScript表达式，所以需添加{}，例如：

<input type="button" disabled={false} />

JSX中的注释

若是在标签的<>内，则按JavaScript注释规范即可；若是标签对之间，需另加{}，例如：

<p 
    /* 这是位于<>内的
       多行
      注释*/
   className="aaa" // 这是位于<>内的单行注释
  >
 {/* 注释位于标签对之间 */}
</p>

使用JSX需注意：

JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签
某些html的属性名是js的保留字，需重新命名（如js中classhe 和for为保留字，所以要写成className和htmlFor；
在js中，事件名使用驼峰命名法，比如onclick变为了onClick；

2.3 导出该组件供其他组件使用－export：

将自定义组件（Timer）作为模块输出给外部／其他组件使用，代码如下：

export default Timer；

可在其他组件／外部中引入该组件并使用：

import Timer from 'c/test/timer';

组件实例化（组件创建并渲染到真实的dom），需要用到ReactDOM.render方法：

  ReactDOM.render(
        <Timer/>,
      document.getElementById('example')
    );

2.4 ReactDOM.render与组件内的render方法比较

注意：

三、组件的props（属性）和state（状态）

React 是基于状态实现对DOM控制和渲染，将组件看成是一个状态机，每一个状态对应一个UI展现，组件状态分为两种：

组件间的状态传递

用props（属性）表示，用于从父组件到子组件的数据传递。

组件的内部状态

用state表示，组件私有，state状态只能在组件内部修改。

3.1 组件属性props

属性props是什么？

可以把props当作组件的数据源，props“属于”父组件，只会从父组件传递到子组件，是父子组件间进行状态传递的接口。React中的数据流是单向的，当父组件传递的props改变时，React会向下遍历整个组件树，并重新渲染使用这个props的组件。

使用注意：

可用setProps()方法（几乎不用）修改组件属性，但是只能在组件外调用，组件内部的this.props属性是只读的，不能用于修改组件自身的属性。

3.2 组件内部状态state

状态state是什么？

React的组件用state来表示内部状态，可随用户的互动而对其修改，state只应该用于存储简单的视图状（如用于控制下拉框的可见状态）。

使用注意：

state可读可改，通过this.state访问和初始化，只能通过setSate()方法修改，且只能在组件内部使用，属于组件私有。

3.3 Props与state的比较

相似点：都是纯JS对象、都会触发render更新、都具有确定性。

组件的render() 方法依赖于 this.props 和 this.state ，React会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。

| props、state的共同点与区别 | props | state |
| :-------------------------------: | :--------: | :--------:|
| 能否从父组件获得初值 | Yes | No |
| 是否能由父组件修改 | Yes | No |
| 能否在组件内部设置默认 | Yes | Yes |
| 能否在组件内部修改 | No | Yes |
| 是否设置子组件的初始值 | Yes | No |
| 能否修改子组件的值 | Yes | No |

四、组件的生命周期

React中一个组件就是一个状态机，在组件的生命周期中，随着组件props或state的改变，其DOM表现形式也会有所变化。组件的生命周期如下图所示：

组件生命周期概览

组件生命周期主要包括3个阶段，React 为每个生命周期阶段都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

Mount（创建期）：已加载到真实 DOM
Update（更新期）：正在被重新渲染
Unmount（销毁期）：已移出真实 DOM

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

componentWillReceiveProps( nextProps)：当已加载组件收到新的props时调用
shouldComponentUpdate( nextProps, nextState)：组件判断是否重新渲染时调用

4.1实例设计

本文将以具体例子的形式讲解生命周期函数，设计图如下图所示，主要包括两个组件：

父组件Timer_controller，向子组件传递子组件的props.content
子组件Timer，包含1个button和1个p，1个props2个state
1. p的文本使用this.props.content
2. button的文本用到this.state.seconds
3. button的颜色用到this.state.buttoncolor
4. button的点击事件会改变this.state.buttoncolor
5. 子组件Timer的定时器会改变this.state.seconds，每2分钟变化一次

实例的结构示意图

实例设计图

实例设计效果图

用于定义子组件Timer的timer.js文件完整代码如下：

class Timer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      seconds: 0,
      buttoncolor: ''
    };
    console.log("constructor","仅一次，组件被创建时执行");
    //console.log("可在此设置组件的初始state");
  }
  
  componentWillMount() {
    let self = this;
    self.setState({
      seconds: 1 
    });
    console.log("componentWillMount", "仅一次，组件第一次被渲染到真实dom前调用，执行完会调用一次render")
    //console.log("在第一次render之前，最后一次机会修改state，修改后第一次render会依照更新后的state");
  }

  componentDidMount() {
    let self = this;
    self.DOMNode = ReactDOM.findDOMNode(self);//获取真实dom
    self.handleclick(); 
    self.timer=setInterval(self.tick.bind(self), 7200);//设置定时器，并绑定到响应函数tick
    console.log("componentDidMount", "仅一次，组件第一次render之后，且已插入到真实dom之后调用")
    //console.log("可在此操作真实dom、添加计时器、绑定监听事件等");  
  }

 //定时器响应函数tick
  tick() {
    let self =this;
    self.setState({
      seconds: self.state.seconds + 1
    });
  }

 //按钮点击事件响应函数handleclick
  handleclick() {
    let self = this;
    if (!self.DOMNode) return;
    //为按钮绑定click事件监听函数
    self.DOMNode.addEventListener('click', function(e){
      let button = e.target;//指向被点击的按钮
      let parent = self.DOMNode;
      if (button.tagName.toUpperCase() === 'SPAN') {
        if (''==self.state.buttoncolor){   
              self.setState({
                  buttoncolor:' btn-content-another'
              }); 
        } else {
              self.setState({
                  buttoncolor: ''
              });
          }
      }
    }, false);
  }

  componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps", "组件接收到新的props的时候调用")
        //console.log("可在此修改state或更新／不更新props");
  }

  shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate","组件接收到新的props或者state时调用，默认返回true")
        //console.log("可在此根据props、state判断返回true或false，若为false，更新期生命周期函数不继续往下执行");
        return true;
  }

  componentWillUpdate(nextProps, nextState) {
        console.log("componentWillUpdate","组件在接收到新的props或state后，render方法进行渲染之前调用")
        //console.log("不能在此处更改state");
  }

  componentDidUpdate(preProps, preState) {
        console.log("componentDidUpdate","组件的更新已经同步到真实DOM中之后立刻被调用")
        //console.log("可访问真实DOM节点并操作之");
  }


  componentWillUnmount() {
      let self = this;
      console.log("componentWillUnmount","组件销毁");
  }

  render () {
    let self=this;
    console.log("render","渲染返回虚拟dom");
    //debugger;
    return (
      <div>
         <button id= 'button' className = {"btn-content" +self.state.buttoncolor} >
                React has been running for {self.state.seconds} seconds.
         </button>
         <p> 
           self.props.content from Timer_controller is {self.props.content} now!                     </p>
      </div>
    ); 
  }
}

4.2 创建期（Mount）

创建期可认为是组件的实例化，页面的初始化：每当组件被创建、首次渲染时，都会有一系列会被调用，调用顺序、时间以及函数用途分别如下表所示，在创建期，表中函数均只调用一次。

创建期程序流程图

实例操作与解析

操作：首次打开页面2分钟内，无其他操作
效果：页面组件初始化，button颜色为灰，内容中的数字为1；p中的数字为9999。依次调用：

constructor (初始化this.state.seconds＝0）
componentWillMount （this.state.seconds被置为1）
render
componentDidMount

组件创建期效果图

组件挂载期效果图

4.3 更新期（Update）

当组件创建并首次渲染完成之后，组件进入更新期，当由于用户与界面的交互或者界面元素的自更新造成组件props或state发生改变时，会有以下方法按顺序根据调用条件而被触发，这些方法除render以外均只在更新期调用，而不会在组件初始化渲染时调用：

| 按序据条件调用 | 调用条件 | 用途 |
| ------------------------- | :-------------------------------: | --------------------------: |
| componentWillReceiveProps | 组件收到新的props时调用| 可修改state及决定是否更新props |
| shouldComponentUpdate| 接收到新的 props 或者state,将要重新渲染之前调用 | 可用于优化react渲染速度,返回true,继续向下执行，返回false，停止向下执行，等待下一次props 或state发生变化 |
| componentWillUpdate| shouldComponentUpdate返回为true后调用 | 不能在此使用this.setState()修改state |
| render |componentWillUpdate之后调用 | 生成虚拟dom |
| componentDidUpdate | 组件已在真实DOM中重新渲染后调用 | 与componentDidMount类似，可操作真实dom |

更新期程序流程图

实例操作与解析

1、样例1－state改变

操作：页面打开后2分钟内，点击button（造成this.state.buttoncolor改变）
效果：button颜色变红，其他跟初始页面一致，依次调用：

shouldComponentUpdate (返回true）
componentWillUpdate
render
componentDidUpdate

组件更新期效果图－点击按钮改变this.state.buttonholer

2、样例2－props改变

操作：页面打开后，无操作，等待2分钟后（定时器改变this.state.seconds），第3分钟时（父组件传递的this.props.content改变）
效果：button颜色为灰，内容中的数字为2；p中的数字为9998。第2分钟时调用的函数及顺序与样例1一致，不同的只是样例2改变的是this.state.seconds，而样例1改变的是this.state.buttonholer。第3分钟props变化时，会依次调用：

componentWillReceiveProps
shouldComponentUpdate (返回true）
componentWillUpdate
render
componentDidUpdate

组件更新期效果图－设置定时器改变this.state.seconds，父组件传递过来的this.props.content改变

3、样例3－shouldComponentUpdate返回false

如果依然按样例1、2一样分别操作，只是将shouldComponentUpdate返回改为false,则生命周期函数停止向下执行，props、state的变化也不会重新渲染到真实dom中。

4.4 销毁期（Unmount）

componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素

五、组件间的通信

详细介绍请点这里或去官网查看

组件之间的通信可分为三种：

无父子关系的组件间通信
父组件－>子组件
子组件－>父组件

5.1 无父子关系的组件间通信

对于事件系统，这里有 2 个基本操作步骤：订阅（subscribe）/监听（listen）一个事件通知，并发送（send）/触发（trigger）/发布（publish）/发送（dispatch）一个事件通知那些想要的组件。

5.2 父组件->子组件传递props

   通过设置props的值，父组件把数据通过props传递给子组件，如在父组件Item的render方法中调用子组件Itemimage，并设置子组件的picture、content属性值

class Item extends React.Component {
    //具体代码省略
    render () {
        return (
            <Itemimage picture={this.props.itemimage} content="这是图片" />
    );
  }
}

5.3 子组件－>父组件回传数据供父组件使用

  本质上，子组件不能向父组件通信。但是可以使用回调函数作为子组件的属性实现子组件向父组件的数据传递：

在父组件定义回调函数，并在父组件的 render 方法中将回调函数作为子组件属性的值传递给子组件。
在子组件中可通过该属性向父组件回传数据。

代码示例如下：

父组件定义

在父组件（Questionlist）中定义回调函数（handleSelect），并在父组件的render方法中将handleSelect作为子组件（Starquestion）属性（callbackParent）的值

class Questionlist extends React.Component {
    /*本例不是完整代码，仅用于展示子组件如何向父组件通信
    父组件Questionlist在render方法里使用了子组件Starquestion
    子组件中自定义的属性callbackParent绑定到了父组件的handleSelect方法
    父组件将在handleSelect方法对子组件通过callbackParent传回的数据进行处理
    */
    handleSelect(questionid,selection,questiongoto) { }

    render() {
          return (
               <Starquestion callbackParent={this.handleSelect.bind(this)} />
          );
     }
}

子组件定义

在子组件中可通过this.props.callbackParent属性向父组件回传数据：

class Starquestion extends React.Component {
  //非完整代码，监听事件等代码已省略，仅演示子组件如何向父组件回传数据,例如将this.props.callbackParent写在componentDidMount()函数中
    componentDidMount() 
         //回传的参数需在子组件中能访问到，参数名自定义
         this.props.callbackParent(参数1,参数2,参数3);     
     }
    render() {
         return (
            <p>非完整代码</p>
         );
     }
}

基于react的H5开发入门基础简介

一、react是什么？

1.1 React诞生背景

1.2 React优势与特点

1.3 虚拟DOM原理

注意 ：

虚拟DOM原理图

使用虚拟DOM需注意

二、组件类的定义

2.1 引入该组件依赖的模块／库－import：

2.2 定义组件－class：

组件class内的函数组成结构

2.2.1组件的父类－React.Component

2.2.2 组件中的生命周期函数重写－ 可写可不写

2.2.3 组件中的render方法－ 一定要有

2.2.4 React独有的JSX语法－ 可用可不用，建议用

JSX中组件的属性值

值为字符串

值为JavaScript表达式

值为布尔值

JSX中的注释

2.3 导出该组件供其他组件使用 －export：

2.4 ReactDOM.render与组件内的render方法比较

注意 ：

三、组件的props（属性）和state（状态）

组件间的状态传递

组件的内部状态

3.1 组件属性props

属性props是什么？

使用注意：

3.2 组件内部状态state

状态state是什么？

使用注意：

3.3 Props与state的比较

相似点 ：都是纯JS对象、都会触发render更新、都具有确定性。

四、组件的生命周期

4.1实例设计

本文将以具体例子的形式讲解生命周期函数，设计图如下图所示，主要包括两个组件：

实例的结构示意图

实例设计效果图

4.2 创建期（Mount）

创建期程序流程图

实例操作与解析

组件创建期效果图

4.3 更新期（Update）

更新期程序流程图

实例操作与解析

1、 样例1－state改变

组件更新期效果图－点击按钮改变this.state.buttonholer

2、 样例2－props改变

组件更新期效果图－设置定时器改变this.state.seconds，父组件传递过来的this.props.content改变

3、 样例3－shouldComponentUpdate返回false

4.4 销毁期（Unmount）

五、组件间的通信

组件之间的通信可分为三种：

5.1 无父子关系的组件间通信

5.2 父组件->子组件传递props

5.3 子组件－>父组件回传数据供父组件使用

父组件定义

子组件定义

热门文章

最新文章

相关课程

相关电子书

相关实验场景

注意：

2.2.2 组件中的生命周期函数重写－可写可不写

2.2.3 组件中的render方法－一定要有

2.2.4 React独有的JSX语法－可用可不用，建议用

2.3 导出该组件供其他组件使用－export：

注意：

相似点：都是纯JS对象、都会触发render更新、都具有确定性。

1、样例1－state改变

2、样例2－props改变

3、样例3－shouldComponentUpdate返回false