【React源码解读】Context && ConcurrentMode

context

在线源码地址：https://github.com/facebook/react/blob/master/packages/react/src/ReactContext.js

两种实现方式

• childContextType (17版本将被废弃)
• createContext (16版本更新)

为什么要弃用旧的api？

老的api对context的提供方下层所有组件影响太大了，它会导致它下层所有的组件（即便该组件在没有更新的情况下），它每次更新的情况下，都会重新渲染

demo

import React from 'react'
import PropTypes from 'prop-types'

const { Provider, Consumer } = React.createContext('default')

class Parent extends React.Component {
  state = {
    childContext: '123',
    newContext: '456',
  }

  getChildContext() {
    return { value: this.state.childContext, a: 'aaaaa' }
  }

  render() {
    return (
      <>
        <div>
          <label>childContext:</label>
          <input
            type="text"
            value={this.state.childContext}
            onChange={e => this.setState({ childContext: e.target.value })}
          />
        </div>
        <div>
          <label>newContext:</label>
          <input
            type="text"
            value={this.state.newContext}
            onChange={e => this.setState({ newContext: e.target.value })}
          />
        </div>
        <Provider value={this.state.newContext}>{this.props.children}</Provider>
      </>
    )
  }
}

class Parent2 extends React.Component {
  // { value: this.state.childContext, a: 'bbbbb' }
  getChildContext() {
    return { a: 'bbbbb' }
  }

  render() {
    return this.props.children
  }
}

function Child1(props, context) {
  console.log(context)
  return <Consumer>{value => <p>newContext: {value}</p>}</Consumer>
}

Child1.contextTypes = {
  value: PropTypes.string,
}

class Child2 extends React.Component {
  render() {
    return (
      <p>
        childContext: {this.context.value} {this.context.a}
      </p>
    )
  }
}

// Child2.contextType = Consumer

Child2.contextTypes = { // 通过这种方式，告诉react在渲染过程中，Child2组件希望去获取它的父层组件中所有传递的context中的某几个
  value: PropTypes.string,
  a: PropTypes.string,
}

Parent.childContextTypes = { // 声明传递给子组件的context
  value: PropTypes.string,
  a: PropTypes.string,
}

Parent2.childContextTypes = { 
  a: PropTypes.string,
}

export default () => (
  <Parent>
    <Parent2>
      <Child1 />
      <Child2 />
    </Parent2>
  </Parent>
)

源码

export function createContext<T>(
  defaultValue: T, 
  calculateChangedBits: ?(a: T, b: T) => number,
) {
    /**
    calculateChangedBits: 一个方法，用来计算新老context变化
    
    */

    const context: ReactContext<T> = {
        $$typeof: REACT_CONTEXT_TYPE,
        _calculateChangedBits: calculateChangedBits,
        
        _currentValue: defaultValue,
        _currentValue2: defaultValue,
       
        Provider: (null: any),
        Consumer: (null: any),
     };
     
     /**
     $$typeof： 与ReactElement的$$typeof不一样
     _currentValue和_currentValue2用处是一样的，只是用的地方不一样，比如不同的平台不一样
     _currentValue： 用来记录Prvoider上面提供的value有变化的情况下，就会更新到这个_currentValue上面，就是用来记录最新的context的值的
     
     */
}

ConcurrentMode

16版本以后提出的功能，其目标让react整体渲染过程有一个优先级排比，并整体的渲染过程能够中断，他就可以进行一个任务的调度，更好的利用cpu性能。react能够让我们去区分一些优先级高低的任务，在进行一个react更新的过程中，优先执行一些较高的任务。

  <ConcurrentMode>
    <Parent />
  </ConcurrentMode>

ConcurrentMode有一个特性，在一个子树当中渲染了ConcurrentMode之后，它下面的所有节点产生的更新 都是一个低优先级的更新

demo

import React, { ConcurrentMode } from 'react'
import { flushSync } from 'react-dom' // 能够强制某一个更新操作的时候，使用一个优先级最高的更新

import './index.css'

class Parent extends React.Component {
  state = {
    async: true,
    num: 1,
    length: 2000,
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.updateNum()
    }, 200)
  }

  componentWillUnmount() {
    // 别忘了清除interval
    if (this.interval) {
      clearInterval(this.interval)
    }
  }

  updateNum() {
    const newNum = this.state.num === 3 ? 0 : this.state.num + 1
    if (this.state.async) {
      this.setState({
        num: newNum,
      })
    } else {
      flushSync(() => {
        this.setState({
          num: newNum,
        })
      })
    }
  }

  render() {
    const children = []

    const { length, num, async } = this.state

    for (let i = 0; i < length; i++) {
      children.push(
        <div className="item" key={i}>
          {num}
        </div>
      )
    }

    return (
      <div className="main">
        async:{' '}
        <input
          type="checkbox"
          checked={async}
          onChange={() => flushSync(() => this.setState({ async: !async }))}
        />
        <div className="wrapper">{children}</div>
      </div>
    )
  }
}


export default () => (
  <ConcurrentMode>
    <Parent />
  </ConcurrentMode>
)

源码

// React.js
import {
  REACT_CONCURRENT_MODE_TYPE,
  REACT_FRAGMENT_TYPE,
  REACT_PROFILER_TYPE,
  REACT_STRICT_MODE_TYPE,
  REACT_SUSPENSE_TYPE,
} from 'shared/ReactSymbols';
...

if (enableStableConcurrentModeAPIs) {
  React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
  React.Profiler = REACT_PROFILER_TYPE;
} else {
  React.unstable_ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
  React.unstable_Profiler = REACT_PROFILER_TYPE;
}


...

/** 
发现ConcurrentMode竟然是一个常量，于是我们去shared/ReactSymbols下一睹
*/

// ReactSymbols.js
const hasSymbol = typeof Symbol === 'function' && Symbol.for;

...

export const REACT_CONCURRENT_MODE_TYPE = hasSymbol
  ? Symbol.for('react.concurrent_mode')
  : 0xeacf;
  
...
/**
我们发现，ConcurrentMode组件就是一个Symbol，它也没有任何的属性

留有疑问，它到底是如何承载chilren的？后续慢慢深入学习
*/