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 使用