React Context在函数组件中的使用
- 文档链接:react context
- 在
react
中,数据是通过props
至上而下进行传递的,context
解决了这样的一种场景,当 Father.Son.[Son1+Son2]
中,Son, Son1, Son2
都需共享到某个数据Data
时,普遍情况下需要- 使用
props
不停地传递,而使用context
则可避免这个问题
初步使用
import React from 'react'
const UserInfoCxt = React.createContext({name: 'curry', authToken: 'LKSJFI23'})
const { Provider, Consumer } = UserInfoCxt
function Father () {
return (
<div className='rp-block'>
<Provider>
<Son />
</Provider>
</div>
)
}
function Son () {
return <Consumer>
{
value => {
return (
<div>
{value.name}
</div>
)
}
}
</Consumer>
}
为什么一定要用context
?
- 答:大可以不用,使用
props
亦可以一直传递,使用{...props}
就可以无限将props
传递到更深层次的子,但这样有几个问题:容易造成多个命名变量冲突,容易造成传递浪费 - 而如果使用如
name={props.name}
进行传递,不仅会造成重复代码,当要变更、添加字段时,改动面积更多
可以直接使用模板文件进行import
?
- 答:可以,但是这样做不到响应化
可以直接使用store
?
- 答:可以,会更复杂,在轻巧的处理上,
context
很有用
正确的使用
function Father () {
const [state, setState] = useState({ name: 'thompson', authToken: '112233' })
return (
<div className='rp-block'>
<Provider value={state}>
<Son />
</Provider>
</div>
)
}
- 应当在
Provider
中提供value
为state
中的值,以达到响应式,传递常数或其他等都不符合逻辑; - 置空也不行,一般的编辑器会提示错误;
关于consumer
return <Consumer>
{
value => {
return (
<div>
{value.name}
</div>
)
}
}
</Consumer>
- 在
consumer
之后,要跟上表达式{ value => {} }
,而不是跟上其他东西,那样会报错,如:
return <Consumer>
<div>{
value => {}
}<div>
</Consumer>
- 传递多个值似乎也是不合规的,如:
<Provider value={state} value2={state2}>
<Son />
</Provider>
<Consumer>
<div>{
(value, value2) => {}
}<div>
</Consumer>
以上的 Provider
及Consumer
都是不对的
一些问答
? 如果只在sonA.sonA-1.sonA-1-1
中的A-1-1
组件中使用Father
的state
- 这种情况似乎可以不使用
context
,只在顶层将state
与A-1-1
进行处理后,将A-1-1
传递下去并进行渲染 - 然而也会引起传参过多的毛病,看这个官方例子获取更多知识
? 当使用了consumer
却没有指定provider
- 此时会使用
Provider
的默认值
? 当使用了Provider
却没有指定value
- 一般来讲编辑器会报
warning
,然后value
将会是undefined
? 可以传递function
- 可以,但是要注意函数内指针
this
的指向
? 可以使用多个context
- 可以,嵌套即可
对于context.value
的使用
- 一般来讲,使用
context.value
来做二次处理是常见的,在class
组件中,比较方便的做法是:
render {
const value = this.context
}
SonA.contextType = TheContext
- 或者使用
static contextType = MyContext;
render {
const value = this.context
}
- 这种方法不清楚多个
context
如何使用,请自行验证 - 而在 函数组件中,则需使用
useContext hook
const value = useContext(MyContext);
- 这种方式,使用多个
context
则较为简单,多次使用useContext
即可