Web技术学苑

在之前的一篇文章中我们有了解到react函数组件和class组件，以及react数据流，状态提升，以及react设计哲学，在我们了解了这些基本的知识后，我们需要了解react内部更深的一些知识

在开始本文之前，主要会从以下几个点去认识react，以及我们那些我们常常遇到的坑

  • react是如何更新数据的，更新数据到底有些注意点

  • react中setState有哪些你需要知道的

  • 如何优化组件渲染

  • Contextopen in new window跨组件通信

正文开始...

react是如何更新数据的

我们在react中更新数据都是调用setState这个方法去更新的，这个更新也是批量异步更新的，在setState更新数据，主要发生了什么,我们看一个简单的栗子，这也是我们上次的一个例子

import React from "react";
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            price: 0,
            type: 0, // 0 人民币 1 代表美元
        }
    }
    handleAdd = () => {
        // this.setState({
        //     count: ++this.state.count
        // })
        this.setState(state => {
            return {
                ...state,
                count: state.count + 1
            }
        })
    }
    handleReduce = () => {
        this.setState(state => {
            return {
                count: state.count - 1
            }
        })
    }
    handleRmbInput = (e) => {
        const val = e.target.value;
        console.log(e)
        this.setState({
            price: val,
            type: 0
        })
    }
    handleDollInput = (e) => {
        const val = e.target.value;
        this.setState({
            price: val,
            type: 1
        })
    }
    render() {
        const { count, price, type } = this.state;
        const ExchangeInput = ({ price, handleChange, type }) => {
            return (<fieldset>
                <legend>{type === "RmbInput" ? '人民币' : '美元'}</legend>
                <input value={price}
                    onChange={handleChange} />
            </fieldset>)
        }
        const rmbVal = type === 0 ? price : price * 7.34;
        const dollVal = type === 1 ? price : 0.14 * price;
        return (<div className="list-app" style={{ padding: '10px' }}>
            <hr />
            <button onClick={this.handleAdd}>+</button>
            <span>{count}</span>
            <button onClick={this.handleReduce}>-</button>
            <hr />
            <ExchangeInput handleChange={this.handleRmbInput} price={rmbVal} type="RmbInput"></ExchangeInput>
            <hr></hr>
            <ExchangeInput handleChange={this.handleDollInput} price={dollVal} type="DollarInput"></ExchangeInput>
        </div>)
    }
}
export default List

我们先看下这个计数器，当我点击+时，数字就会+1，当我点击-时，就会-1

handleAdd = () => {
    this.setState({
        count: ++this.state.count
    });
    console.log(this.state, 'count')
}

这样貌似就可以更新数据了,我们会发现state打印的值是{count: 1, price: 0, type: 0}

在这之前不是说setState是一个异步的操作吗？怎么打印是好像是同步的一样？但事实并非如此,如果你是这么改，那么你会发现

handleAdd = () => {
    this.setState({
        count: 2
    });
    console.log(this.state, 'count')
}

此时的结果就是{count: 0, price: 0, type: 0} 'count'

这就证明setState这个方法就是异步的，也就说明在handleAdd这个内部方法中，优先执行了同步任务执行打印操作，然后再执行setState的

但是上面的一个例子貌似表现跟这个不太一样，那是因为对象值引入的问题，上面那段代码可以拆分下面这样

handleAdd = () => {
    this.state.count+=1;
    const initState = {
      count: this.state.count
    }
    this.setState(initState);
    console.log(this.state, 'count')
}

因为++this.state.count相当于this.state.count+=1,在调用setState方法时，实际上这个state的count就已经更改，而this.setState这个方法是异步，所以会先执行打印，所以打印的值自然是修改的值了，都是同一个对象的引用。

setState

对于setState设置数据是异步的，我们还需要知道如果想立即获取修改后的数据呢，我们先看下setState这个方法

handleAdd = () => {
   console.log(this.setState);
   this.setState({
      count: 2
  });
  console.trace()
}

在源码里，就是这样的


Component.prototype.setState = function (partialState, callback) {
  if (typeof partialState !== 'object' && typeof partialState !== 'function' && partialState != null) {
    throw new Error('setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.');
  }

  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

我们看到源码setState方法是挂载在Component的prototype上的，所以我们用this就能访问该组件上的setState,而Component就是一个构造函数

function Component(props, context, updater) {
  this.props = props;
  this.context = context; // If a component has string refs, we will assign a different object later.

  this.refs = emptyObject; // We initialize the default updater but the real one gets injected by the
  // renderer.

  this.updater = updater || ReactNoopUpdateQueue;
}

我们看到setState内部方法有对入参进行类型判断，也就是说必须是传入一个对象或者函数而且不为null否则就会抛出错误

所以我们可以把setState的第一个参数也可以改成函数试试，但是必须返回一个对象，否则并不会更新UI

handleAdd = () => {
    this.setState(state => {
        return {
            ...state,
            count: state.count + 1
        }
    })
    // 这里依然是上一次的值
    console.log(this.state, 'count')
}

从源码我们知道setState除了第一个参数是对象或者函数外，也提供了第二个回调参数callback，这个通常在项目中也会很有用，就是在你更新state后想立即拿着state去做一些其他操作时

handleAdd = () => {
    this.setState(state => {
        return {
            ...state,
            count: state.count + 1
        }
    }, () => {
        // 立即获取修改后的值
        console.log(this.state)
    })
}

我们可以修改值后，在回调函数后就立即更新值了，我们从执行setState这个方法中也看到实际上更新UI的过程中也调用内部其他很多方法，每次触发setState都会执行render函数

而我们注意到在开发环境render内部的console.log会被打印两次，这点，官方有解释open in new window，主要是开发环境双调用了渲染生命周期，帮助在渲染中可以查找出副作用引出的问题.

所以我们可以把ExchangeInput组件可以提出去，不在render中定义，这样性能上会更好

组件渲染优化

一个组件当state或者props发生变化时，就会更新组件,具体写个例子

新建一个组件Box组件，我可以通过父组件可以控制其宽度与高度，并且点击背景可以换肤

// Box.js
import React from "react";
class Box extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            divStyle: {
                width: props.count ? `${props.count * 100}px` : '100px',
                height: props.count ? `${props.count * 100}px` : '100px',
            },
            color: 'red'
        }
    }
    // 优化，默认是返回true,如果返回false,则不会渲染组件
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.count !== nextProps.count) {
            return true
        }
        if (this.state.color !== nextState.color) {
            return true;
        }
        return false
    }
    updateStyle = () => {
        const { divStyle } = this.state;
        if (!this.props.count) {
            return divStyle
        }
        return {
            width: `${this.props.count * 100}px`,
            height: `${this.props.count * 100}px`,
        }
    }
    handleChangeBg = () => {
        this.setState({
            color: this.state.color === 'red' ? 'green' : 'red'
        })
    }
    render() {
        return (<div style={{ ...this.updateStyle(), backgroundColor: this.state.color }} onClick={this.handleChangeBg}>
            <p>color: {this.state.color}</p>
            <p>count: {this.props.count}</p>
        </div>)
    }
}
export default Box

在index.js中引入

import React from "react";
import Box from './Box'
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 1,
            price: 0,
            type: 0, // 0 人民币 1 代表美元
        }
    }
    render() {
        // console.log(222)
        // console.trace();
        const { count, price, type } = this.state;
        const rmbVal = type === 0 ? price : price * 7.34;
        const dollVal = type === 1 ? price : 0.14 * price;
        return (<div className="list-app" style={{ padding: '10px' }}>
            <hr />
            <button onClick={this.handleAdd}>+</button>
            <span>{count}</span>
            <button onClick={this.handleReduce}>-</button>
            <hr />
            <Box count={count}></Box>
        </div>)
    }
}
export default List

当修改count时，就会更新这个box的宽度与高度

在Box组件主要看这段代码

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.count !== nextProps.count) {
        return true
    }
    if (this.state.color !== nextState.color) {
        return true;
    }
    return false
}

当我们调用setState后，就会调用这个钩子函数，这个钩子函数默认是返回true,如果你想优化，在某些条件下可以返回false不渲染组件。官方也说明了这个是一个浅比较open in new window,如果是引用数据类型，最好不要在原有数据上进行操作，因为是同一份引用，容易出问题。

关于浅比较，官方也给出了一种比较替换方案，你可以用PureComponent组件替代你这种现有做的优化

因此你可以替换成下面这样


import React from "react";

class Box extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            divStyle: {
                width: props.count ? `${props.count * 100}px` : '100px',
                height: props.count ? `${props.count * 100}px` : '100px',
            },
            color: 'red'
        }
    }
    // 优化，默认是返回true,如果返回false,则不会渲染组件
    // shouldComponentUpdate(nextProps, nextState) {
    //     if (this.props.count !== nextProps.count) {
    //         return true
    //     }
    //     if (this.state.color !== nextState.color) {
    //         return true;
    //     }
    //     return false
    // }
    updateStyle = () => {
        const { divStyle } = this.state;
        if (!this.props.count) {
            return divStyle
        }
        return {
            width: `${this.props.count * 100}px`,
            height: `${this.props.count * 100}px`,
        }
    }
    handleChangeBg = () => {
        this.setState({
            color: this.state.color === 'red' ? 'green' : 'red'
        })
    }
    render() {
        return (<div style={{ ...this.updateStyle(), backgroundColor: this.state.color }} onClick={this.handleChangeBg}>
            <p>color: {this.state.color}</p>
            <p>count: {this.props.count}</p>
        </div>)
    }
}
export default Box

所以PureComponent算是优化组件渲染简洁最快速的一种方法了

跨组件通信

在react父子数据传递都是通过props，如果遇到嵌套组件好几级情况下，那么props传递将会一层一层传入孙组件中，有没有更好的解决办法呢？

有两种通用的方案，在react中你也可以用状态管理工具，比如redux将状态存储到全局的store中，那么跨组件任意一个组件都可以访问了，除了这种还有一种方案那么就是Context，这种方案有点类似vue中的provide/inject也是跨组件传递数据，不过react的做法要稍微复杂一些

// index.js
import React from "react";
import Box from './Box'
const initColor = {
    color: 'yellow',
    text: '黄色'
}
export const ColorContext = React.createContext(initColor);
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 1,
            price: 0,
            type: 0, // 0 人民币 1 代表美元
            initColor
        }
    }
    render() {
        return (<div className="list-app" style={{ padding: '10px' }}>
           ...
            <ColorContext.Provider value={this.state.initColor} >
                <Box count={count}></Box>
            </ColorContext.Provider>
           
        </div>)
    }
}
export default List

从以上代码中可以看出主要是做了以下几件事

  • 创建createContext对象
  • 创建对象调用Provider包裹子组件Box并传入value初始值

我们继续看下Box这个组件


import React from "react";
import OtherContent from './OtherContent'
class Box extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            divStyle: {
                width: props.count ? `${props.count * 100}px` : '100px',
                height: props.count ? `${props.count * 100}px` : '100px',
            },
            color: 'red'
        }
    }
    ...
    render() {
        return (<div style={{ ...this.updateStyle(), backgroundColor: this.state.color }} onClick={this.handleChangeBg}>
            <p>color: {this.state.color}</p>
            <p>count: {this.props.count}</p>
            <OtherContent></OtherContent>
        </div>)
    }
}
export default Box

你会发现又引入了一个其他的组件OtherContent,这个组件就是孙组件，所以想要父组件的数据直接在孙组件上使用，那么我们可以在OtherContent组件中这么做

import React from "react";
import { ColorContext } from './index';
const OtherContent = () => {
    const state = React.useContext(ColorContext);
    console.log(state);
    const Pdom = () => <p style={{ color: state.color }}>context: {state.text}</p>
    return <Pdom></Pdom>
}

export default OtherContent;

从以上代码中我们可以看出，我们必须要做以下几件事

  • 引入创建的Contenxt
  • 调用useContext函数，其中形参就是我们引入创建的Contenxt，返回初始值

因此我们看到最终的结果就是下面这样的

最顶层的数据就传入了孙子组件中去了。

如果我想改变孙组件OtherContent的状态呢?

只需要在初始数据中挂载一个回调函数，注意changeColor会从value传入子组件中

// index.js
import React from "react";
import Box from './Box'
const initColor = {
    color: 'yellow',
    text: '黄色',
    changeColor: () => { }
}
export const ColorContext = React.createContext(initColor);
class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            price: 0,
            type: 0, // 0 人民币 1 代表美元
            initColor: {
                ...initColor,
                changeColor: this.changeColor
            },

        }
    }
    changeColor = () => {
        this.setState((state, props) => {
            return {
                ...state,
                initColor: {
                    ...state.initColor,
                    color: this.state.initColor.color === 'yellow' ? 'blue' : 'yellow',
                    text: this.state.initColor.text === '黄色' ? '蓝色' : '黄色',

                }
            }
        })
    }
    ...
    render() {
        const rmbVal = type === 0 ? price : price * 7.34;
        const dollVal = type === 1 ? price : 0.14 * price;
        return (<div className="list-app" style={{ padding: '10px' }}>
           
            <ColorContext.Provider value={this.state.initColor} >
                <Box count={count}></Box>
            </ColorContext.Provider>

        </div>)
    }
}
export default List

然后我们看下Box组件

import React from "react";
import OtherContent from './OtherContent'
import { ColorContext } from './index';

class Box extends React.PureComponent {
    ...
    render() {
        return (<div style={{ ...this.updateStyle(), backgroundColor: this.state.color }} onClick={this.handleChangeBg}>
            <p>color: {this.state.color}</p>
            <p>count: {this.props.count}</p>
            <ColorContext.Consumer>
                {
                    ({ changeColor }) => {
                        return (<>
                            <a href="javascript:void(0)" onClick={(e) => {
                                changeColor();
                                e.stopPropagation();
                            }}>改变OtherContent</a>
                            <OtherContent></OtherContent>
                        </>)
                    }
                }
            </ColorContext.Consumer>

        </div>)
    }
}
export default Box

如果我们想在Box组件改变OtherContent的组件状态，那么只需要用ColorContext.Consumer包裹起来，但是这里面必须返回一个组件才行,这个changeColor实际上就是父组件value传入到子组件里面的。

最后修改OtherContent的状态还是调用根组件上changeColor方法，也是调用setState修改了原初始值的数据。

当我们点击OtherContent上面的文字时，就可以改变自身元素的state了。

总结

  • 当我们更新state主要是依赖setState这个方法，这个方法修改值是异步调用的

  • 我们要知道setState的第一个参数可以是对象也可以是函数，当是函数时必须返回一个对象才行，第二个回调参数可以立即获取到修改后的state值,而且setState修改数据是批量异步更新的

  • 组件优化可以用React.PureComponent代替原有的React.Component，主要是替代原有的shouldComponentUpdate钩子做了一层浅比较，会帮你做一些优化，不必要的重复渲染，shouldComponentUpdate钩子默认返回true,当返回false时，不会渲染组件

  • 跨组件通信，主要利用内置的APIReact.createContext实现跨组件通信，有点类似vue中的provide/inject功能

  • 本文示例code exampleopen in new window

扫二维码，关注公众号
专注前端技术，分享web技术
加作者微信
扫二维码 备注 【加群】
教你聊天恋爱，助力脱单
微信扫小程序二维码，助你寻他/她
专注前端技术，分享Web技术
微信扫小程序二维码，一起学习，一起进步
前端面试大全
海量前端面试经典题，助力前端面试