Render Props

基本用法

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

class Container extends  {
  state = { value: 1 }
  render() {
    return <div>
      <button onClick={() => this.setState({ value: this.state.value + 1 })}>
        add
      </button>
      {/* 接收value并展示具体ui的子组件, 例如要渲染ValueUI */}
      <ValueUI value={this.state.value} />
    </div>
  }
}

class ValueUI extends  {
  render() {
    return <p>{ this.props.value }</p>
  }
}

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

class Container extends  {
  state = { value: 1 }
  render() {
    return <div>
      <button onClick={() => this.setState({ value: this.state.value + 1 })}>
        add
      </button>
      { this.props.render(value) }
    </div>
  }
}

function Main() {
  return <Container
    render={value => <ValueUI value={value} />}
  />
}

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

class Container extends  {
  state = { value: 1 }
  render() {
    return <div>
      <button onClick={() => this.setState({ value: this.state.value + 1 })}>
        add
      </button>
      { this.props.children(value) }
    </div>
  }
}

function Main() {
  return <Container>{
    value => <ValueUI value={value} />
  }</Container>
}

重渲染问题

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

class Container extends React.PureComponent {...}
class Main extends  {
  render() {
    return <div>
      <button onClick={() => this.setState({})}>click</button>
      <Container>{
        value => <ValueUI value={value} />
      }</Container>
    </div>
  }
}

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

class Main extends  {
  renderValueUI(value) {
    return <ValueUI value={value} />
  }
  render() {
    return <div>
      ...
      <Container>{ this.renderValueUI }</Container>
    </div>
  }
}

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  {
  render() {
    return <ColorContext.Provider value='red'>
      <SizeContext.Provider value='large'>
        <Wrapper />
      </SizeContext.Provider>
    </ColorContext.Provider>
  }
}
class Wrapper extends  {
  render() {
    return <UIComp />
  }
}
class UIComp extends  {
  render() {
    return <ColorContext.Consumet>{
      color => (
        <SizeContext.Consumer>{
          size => <Child color={color} size={size} />
        }</SizeContext.Consumer>
      )
    }</ColorContext.Consumet>
  }
}

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

const ColorContext = React.createContext('red')
class Main extends  {
  render() {
    return <ColorContext.Provider value='red'>
      <Wrapper />
    </ColorContext.Provider>
  }
}
class Wrapper extends  {
  render() {
    return <UIComp />
  }
}
class UIComp extends  {
  static contextType = ColorContext
  render() {
    return <Child color={this.context} />
  }
}

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  {
  state = { ...defaultValue }
  render() {
    return <div>
      <div><button onClick={() => {
        // # test code #
      }}>+</button></div>
      <Context.Provider value={this.state.count}>
        <div className="app">
          <Wrapper count={this.state.count} />
          <OtherComp />
        </div>
      </Context.Provider>
    </div>
  }
}

class OtherComp extends  {
  render() {
    console.log('render otherComp')
    return <p>OtherComp</p>
  }
}
class Wrapper extends  {
  shouldComponentUpdate() { return false }
  render() {
    console.log('render wrapper')
    return <div>
      <p>wrapper: {this.props.count}</p>
      <Child />
    </div>
  }
}
class Child extends  {
  static contextType = Context
  render() {
    console.log('render child')
    return <p>child: {this.context.count}</p>
  }
}

# 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  {
  state = { ...defaultValue }
  render() {
    return <div>
      <div><button onClick={() => { ... }}>+</button></div>
      <Context.Provider value={this.state.count}>
        { this.props.children }
      </Context.Provider>
    </div>
  }
}
class Main extends  {
  render() {
    return <CountProvider>
      <div className="app">
        <Wrapper />
        <OtherComp />
      </div>
    </CountProvider>
  }
}

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

References