React原理

一.setState()方法说明：更新数据是异步的。

注意：1.使用setState()时，后面再使用setState()不依赖前面的setState(）。

           2.setState()方法多次调用，指挥触发一次render().

推荐语法：

        this.setState((state,props)=>{     //其中state和props是最新的state和props

                return{ count:state.count+1}

        }

上面的这种setState()，参数是箭头函数的形式，更新数据也是异步的，但是第一次调用的结果(state,props)会传给第二次调用。

this.setState((state,props)=>{

}，()=>{

        console.log('这是setState这种调用形式的第二个参数，这个回调函数会再状态更新后调用）

      }）

二.JSX语法的转换过程

JSX仅是createElement()方法的一个语法糖（简化语法）。

JSX语法：

const element={

        <div className="greeting>

                Hello JSX

        </div>

}

createElement()方法：

const element = React.createElement('h1',{className:'greeting'},'Hello JSX'}

JSX语法被@babel/preset-react插件编译为createElement()方法。

三.组件更新机制：

过程：父组件最新渲染，也会重新渲染组件，但只会渲染当前组建的子组件。

四.组件性能优化：

1.减轻state：只存储组件u雪纳瑞相关的数据。

class Hello extend React.component{

        componentDidMount(){

                this.timerId=setInterval(()=>{  },2000)          //timerId存储再this中，而不是state中

        }

        componentWillUnmount(){

                clearInterval(this.timerId）

        }

}                （state存储的数据越多，组件的性能越差）

2.避免不必要的重新渲染

解决方法：使用钩子函数shouldComponentUpdate(nextProps,nextState),这个钩子函数在组件重新渲染之前触发。

shouldComponentUpdate(nextProps,nextState){

        console.log('最新的State',nextState)

        return ture //返回true重新渲染，返回false不重新渲染

}

作用：通过nextState和this,state是否相等，判断是否更新。

3.纯组件：PureCompoenent与React.Component功能相似。

区别：PureComponent内部实现了shouldComponentUpdate钩子函数，不要手动比较。

原理：纯组件内部通过分别对比之前的state和props的值，来决定是否渲染组件。

纯组件内部的对比是shallow compare(浅层对比）：

        对应值类型：没有问题。

        对应应用类型来说:需要采用创建新对象方法,对应数组采用创建新数组的方法。

                const newObj= {...this.state.obj,number:math.floor(Math.renadom()*3}

                this.setState(()=>{

                        return { obj:newObj}

                })

 

五.虚拟DOM和Diff算法

虚拟DOM:本质就是一个JS对象，用来描述你希望在屏幕上看到的内容。

执行过程：

        1.初次渲染时，React会根据初始state，创建一个虚拟的DOM对象。

        2.根据虚拟DOM生成真正的DOM，渲染到页面。

        3.当数据变化后（setState()),重新根据新的数据，创建新的虚拟DOM对象。

        4.与上次得到的虚拟DOM对象，使用Diff算法对比，得到需要的新内容。

        5.最终，React只将变化的内容更新DOM中，重新渲染页面。