React基础_6(原理.优化)

前言

1.React相关原理
2.React性能优化

正文

React相关原理介绍
setState方法，这个方法是异步更新数据的，并且多次调用setState方法最后只会重新渲染一次render方法

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        this.setState({
            num:this.state.num+1
        })
        console.log("当前state时:",this.state.num)
        this.setState({
            num:this.state.num+1
        })
        console.log("当前state时:",this.state.num)
    }
    render(){
        console.log("render触发了")
        return(
            <div>
                <h2>当前的state是:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

单击+1之后的结果

使用下面这种语法可以获取state的最新值，从而保证每次获取到的state都是最新的。

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        //采用回调函数做参数，返回需要修改的内容
        this.setState((state,props)=>{
            return {
                num:state.num+1
            }
        })
        console.log("当前state时:",this.state.num)
        this.setState((state,props)=>{
            return {
                num:state.num+1
            }
        })
        console.log("当前state时:",this.state.num)
    }
    render(){
        console.log("render触发了")
        return(
            <div>
                <h2>当前的state是:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

单击+1后


值得一提的是用这种方法更新仍然是异步的，可以说setState就是异步的。

setState的第二个参数，是一个回调函数，当render重新渲染完成之后立马执行此函数。这个回调函数的执行在componentDidUpdate之后。

class App extends React.Component{
    state={
        num:0
    }
    Click=()=>{
        //采用回调函数做参数，返回需要修改的内容
        this.setState(
        (state,props)=>{
            return {
                num:state.num+1
            }
        },
        ()=>{
            console.log("页面重新渲染完成")
        })
    }
    render(){
        console.log("render触发了")
        return(
            <div>
                <h2>当前的state是:{this.state.num}</h2>
                <button onClick={this.Click}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

单击+1之后的结果

JSX语法是createElement()的简化，JSX语法会被babel插件转化成createElement()方法，最后在createElement()方法内部会将内容转化成一个JSX对象，以键值对的形式储存所有信息。

组件更新机制，当父组件发生重新渲染的时候，所有的子组件也会发生重新渲染，以及子组件的子组件。

对组件性能优化
1.state只存储和组件重新渲染有关系的数据，对于需要在多格函数中用到的数据放在this中。
2.避免不必要的渲染，使用钩子函数shouldComponentUpdate(nextProps,nextState)，当返回值为true时表示需要重新渲染，当为false时不需要重新渲染。该函数的运行时期在render之前.
参数为最新的props和state，在函数中调用this.state获取到的是更新前的数据，props同理。
3.纯组件

class App extends React.PureComponent{
    state={
        num:0
    }
    changeNum=()=>{
        this.setState(()=>{
            return {
                num:Math.floor(Math.random() *3)
            }
        })
    }
    render(){
        console.log("render触发了")
        return(<div>
            <h2>当前的随机数是:{this.state.num}</h2>
            <button onClick={this.changeNum}>随机生成</button>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))

纯组件相较于普通组件，纯组件继承自React.PureComponent，在纯组件中内置了相当于shouldComponentUpdate()，会去判断数据是否发生了更新从而判断是否要更新组件，当然这种比较是简单的比较，对于一些复杂的数据机构比较可能会出现问题，比如对象在更新数据时不要更新对象里的数据，要重新创建一个对象，更新整个对象.

最后值得一提的是render方法的调用并不表示重新渲染整个页面，表示diff算法执行，只更新需要更新的地方。

结语

笔者也是第一次学习做出的总结，要是能从我这里得到一些帮助最好不过，若有错误还望大佬在评论帮忙指出。