React.createContext和React.forwardRef的用法，作用

createContext和forwardRef都是React顶级对象暴露出来的API，一直没怎么深入了解过，今天就来仔细聊聊。

1，React.createContext

用法如下：

import React, {PureComponent,createContext} from 'react';

const {Provider, Consumer} = createContext('defaultValue')

// 父组件
class App extends PureComponent {
  render() {
    return (
      <div style={{width: '500px', height: '500px', border: '1px solid #000'}}>
        父组件
        <Provider value={'传递给子组件的值'}>
          <AppSon/>
        </Provider>
      </div>
    );
  }
}

// 子组件
class AppSon extends PureComponent {
  render() {
    return (
      <div style={{width: '200px', height: '200px', border: '1px solid #000'}}>
        子组件
        <Consumer>
          {value => <h1>{value}</h1>}
        </Consumer>
      </div>
    );
  }
}
export default App;

作用：为了解决Component之间传值需要通过props一级一级的传递，很麻烦。而"createContext"的出现就完美的解决了这个问题，它内部采用了发布（见上Provider）订阅（见上Consumer）的模式来实现组件之间跨级传值，如果组件需要数据，订阅即可。

2，React.forwardRef

用法如下：

import React, {Component, createRef, forwardRef} from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.ref = createRef()
  }
  getSonInputValue = () => {
    console.log(this.ref.current.value) // forwardRef学习
    alert(this.ref.current.value)
  }
  render() {
    return (
      <div>
        <button onClick={this.getSonInputValue}>点击获取子组件input的值</button>
        <SonRef ref={this.ref}></SonRef>
      </div>
    );
  }
}

const SonRef = forwardRef((props, myRef) => {
  return (
    <div>
      <input type="text" defaultValue={'forwardRef学习'} ref={myRef /* 将父组件的ref代理到子组件*/}/>
    </div>
  )
})

export default App;

作用：为了父组件能够获取子组件中元素的属性，比如上述代码中，父组件就获取到了子组件中input的值