React - 从Render Props说到Context API

Render Props

基本用法

有这样一种组件，它只维护自身的state（可能也包括修改state值的ui与handler），具体的显示逻辑由子组件完成。例如：

class Container extends React.Component {
  state = { value: 1 }
  render() {
    return 

       this.setState({ value: this.state.value + 1 })}>
        add
      
      {/* 接收value并展示具体ui的子组件, 例如要渲染ValueUI */}
      
    
  }
}

class ValueUI extends React.Component {
  render() {
    return 
{ this.props.value }
  }
}

假如我们要渲染的ui组件是可替换的，那么就不能再Container里把它写死。解决方法就是Render Props写法：可以向Container传入一个prop，它是一个输出组件的function。例如：

class Container extends React.Component {
  state = { value: 1 }
  render() {
    return 

       this.setState({ value: this.state.value + 1 })}>
        add
      
      { this.props.render(value) }
    
  }
}

function Main() {
  return  }
  />
}

这样在使用Container时，就可以自由地切换render函数中要渲染的组件了。
Render Props写法并不是非要用render作prop名，可以是任意的名称，还可以利用children属性，这样代码就可以写成：

class Container extends React.Component {
  state = { value: 1 }
  render() {
    return 

       this.setState({ value: this.state.value + 1 })}>
        add
      
      { this.props.children(value) }
    
  }
}

function Main() {
  return {
    value => 
  }
}

重渲染问题

Render Props与PureComponent搭配使用时有一个问题需要注意。我们把上面的Container组件改为PureComponent，并修改一下Main的代码：

class Container extends React.PureComponent {...}
class Main extends React.Component {
  render() {
    return 

       this.setState({})}>click
      {
        value => 
      }
    
  }
}

点击Main里的button时，我们预期的是Container不会重渲染，但是事与愿违。这是因为Main的render函数每次执行时，都会新生成一个value => 函数，即Container的children属性，也就是说每次Main重渲染，Container的prop都会改变。解决方法是把这个函数独立出来，比如：

class Main extends React.Component {
  renderValueUI(value) {
    return 
  }
  render() {
    return 

      ...
      { this.renderValueUI }
    
  }
}

React 16的新型Context API

Context与Render Props

Render Props写法也常用于React的新Context API，尤其是嵌套访问Context时：

const ColorContext = React.createContext('red')
const SizeContext = React.createContext('large')
class Main extends React.Component {
  render() {
    return 
      
        
      
    
  }
}
class Wrapper extends React.Component {
  render() {
    return 
  }
}
class UIComp extends React.Component {
  render() {
    return {
      color => (
        {
          size => 
        }
      )
    }
  }
}

如果没有嵌套的话，用contextType的写法更简单：

const ColorContext = React.createContext('red')
class Main extends React.Component {
  render() {
    return 
      
    
  }
}
class Wrapper extends React.Component {
  render() {
    return 
  }
}
class UIComp extends React.Component {
  static contextType = ColorContext
  render() {
    return 
  }
}

Provider的穿透性

Provider本身是一个组件，当它所处层级发生重渲染时，它与普通组件一样会触发自身与children的重渲染；另一方面，只要Provider的value发生改变(使用Object.is来判断)，它的子树上的所有Consumer也都会发生重渲染，不论Provider与Consumer层级之间是否有组件block了更新(shouldComponentUpdate返回false)。这就是新Context API的穿透性，当Provider的value改变时，它无视子树上的shouldComponentUpdate，穿透层级更新Consumer。这个穿透性，老Context是不具备的。
下面是一个验证穿透性与普通组件属性的例子：

const defaultValue = { count: 1 }
const Context = React.createContext({ ...defaultValue })

class Main extends React.Component {
  state = { ...defaultValue }
  render() {
    return 

      
 {
        // # test code #
      }}>+
      
        

          
          
        
      
    
  }
}

class OtherComp extends React.Component {
  render() {
    console.log('render otherComp')
    return 
OtherComp
  }
}
class Wrapper extends React.Component {
  shouldComponentUpdate() { return false }
  render() {
    console.log('render wrapper')
    return 

      
wrapper: {this.props.count}
      
    
  }
}
class Child extends React.Component {
  static contextType = Context
  render() {
    console.log('render child')
    return 
child: {this.context.count}
  }
}

# test1: count变化 #
this.setState({ count: this.state.count + 1 })
// click button then logs:
// render child
// render otherComp
// Main重渲染，Provider发现value变化，无视Wrapper的block，触发Consumer(Child)重渲染

# test2: count值不变的情况下重渲染Main #
this.setState(this.state)
// click button then logs:
// render otherComp
// Provider发现value无变化，不触发Consumer重渲染；且Wrapper阻止了重渲染，所以Child没有重渲染

Context导致的重复渲染问题:

上面这个例子中，Main组件的state作为Provider的value传给Consumer，state变更在Main组件的层级发生，这样会导致一个问题：每次setState，Main的render函数执行，OtherComp这个不相关的组件也重渲染了，而我们的本意只是要更新Consumer。换句话说，Main执行render -> render中的JSX重新解析(React.CreateElement) -> OtherComp执行render。那么有什么方法可以避免呢？
思路很简单，Main的render执行肯定会引发OtherComp的render执行，那么我们可以不让Main来做管理Context的value这件事：建一个独立的组件来管理value和Provider，把children的JSX写在这个组件之外。

class CountProvider extends React.Component {
  state = { ...defaultValue }
  render() {
    return 

      
 { ... }}>+
      
        { this.props.children }
      
    
  }
}
class Main extends React.Component {
  render() {
    return 
      

        
        
      
    
  }
}

这样以来，CountProvider每次更新state，执行render时，收到的children都是Main传给他的，而Main的render没有执行，因此OtherComp的render也不会执行；Context发现value变化，触发子组件树中的Consumer-Child重渲染。

References

React - Render Props官方文档
React - Context官方文档
避免React Context导致的重复渲染