react 中的 createRef，createContext，forwardRef

createRef

react 即将抛弃 <div ref = 'myDiv' />这种 string ref的用法，将来只能使用俩种方式来使用 ref

class App extends React.Component{
	constructor(){
		this.ref = React.createRef()
	}
	render(){
		return <div ref = {this.ref} />
		//or
		return <div ref = {(node) => this.funRef = node} />
	}
}

createContext

createContext是官方定稿的 context 方案，老的context API都是 React 不推荐的 API，现在新的 API 释出。

const {Provider,Consumer} = React.createContext('defaultValue')
const ProviderComp = (props) => (
	<Provider value = {'realValue'}>
		{props.children}
	</Provider>
)
const ConsumerComp = () => (
	<Consumer>
		{(value) => <p>{value}</p>}
	<Consumer>
)

forwardRef

forwardRef是用来解决 HOC 组件传递 ref 的问题的，HOC 是 Higher Order Component，比如使用redux时，我们用connect来给组件绑定需要的state，这其中其实就是给我们的组件在外部包了一层组件，然后通过...props的方式把外部的props传入到实际组件。

const TargetComponent = React.forwardRef((props,ref) => {
	<TargetComponent ref={ref} />
})

这时候，如果使用string ref就没法当做参数传递了，所以提供createRef作为新的 ref 使用