React Context的使用

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即可