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不能做用在函数组件上获取组件实例