react知识结构

react.js组件化

创建好拥有各自 state(状态) 的组件，再将其组合构成更加复杂的UI界面。

组件的划分

1. 容器组件：容器型组件是一个页面容器，用来放置当前页面的所有展示型组件和业务组件组合成一个页面，通过数据的驱动进行控制展示组件和业务组件
2. 展示组件：展示型组件是具体到某一个小的组件模块，比如一个按钮，一个卡片，一个进度条等，我们在用react做组件化开发的时候，先定义好一个个小的展示型组件，然后把这些组件都导入容器型组件，最终组合成一个完整的页面。
3. 业务组件：页面中某个业务模块的拆分，涉及到数据交互，有自己独立的业务逻辑

组件的创建

函数组件：函数组件也称为无状态组件，使用纯函数创建，创建后不会产生组件实例，也就是说无法使用ref获取，主要用于展示组件的开发，性能高，没有生命周期，没有state，但是可以接收props，相当于一个只有render生命周期的组件

function Component (props) {
    return <div>{props.children}</div>
}
//使用
<Component>组件</Component>

class类组件：使用es6 class的方式创建，通过继承React.component实现，可以有自己独立的生命周期，state状态，必须有render生命周期，state定义在constructor构造函数中,所用的容器组件都是通过class创建

class Component extends React.component {
   constructor (props) {
     super(props)
     this.state = {
         age: 100
     }
   }
   render () {
       const {age} = this.state
       return <div>{age}</div>
   }
}
//使用
<Component />

createClass组件：不常用

在react中最小的单位是元素，元素分为dom元素，组件元素，区分方法是dom元素小写，组件元素首字母大写

react组件的状态

在react中组件的状态使用state定义，使用setState修改，使用this.state读取
setState执行原理：setState方法通过一个队列机制实现state更新，当执行setState的时候，会将需要更新的state合并之后放入状态队列，而不会立即更新this.state(可以和浏览器的事件队列类比)。

componentDidMount() {
    SynapseAnalytics.init({ type:Enum.pageTypeEnum.otherPage });
    this.setState({
        val:this.state.val + 1
    });
    //第一次输出  0
    console.log(this.state.val);
    this.setState({
        val:this.state.val + 1
    });
    //第二次输出 0
    console.log(this.state.val);
    setTimeout(()=>{
        this.setState({val:this.state.val + 1});
        //第三次输出 2
        console.log(this.state.val);
        this.setState({
            val:this.state.val + 1
        });
        //第四次输出 3
        console.log(this.state.val);
    }, 0);
} 

在componentWillUpdate、render、componentDidUpdate生命周期中不可以调用setState。因为会造成循环调用，使得浏览器内存占满后崩溃

调用setState后发生了什么？
setState合并机制

setState更新机制

react

react如何操作dom
使用ref可以获取dom
使用react-dom，react-dom是react提供专门用于操作dom的模块，主要就是findDOMNode, render
事件处理函数中的event对象的target属性
在函数组件不能使用findDOMNode获取组件对应的根节点
在函数组件内部使用ref获取dom，但是ref不能作用在函数组件上获取组件实例