8月更文挑战｜Hook 之 useContext 使用

了解useContext之前，可以先了解一下Context

Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法 Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。接下来看一下Context的API

React.createContext

const MyContext = React.createContext(defaultValue);

需要注意点是：组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

Context.Provider

<MyContext.Provider value={/* 某个值 */}>

Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新

Class.contextType

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

简单来说用静态属性初始化contextType，拿到context，获取context的值。

Context.Consumer

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

查找到上方离这个context最近的Provider提供的 value 值

useContext

了解晚Context之后，怎么使用useContext呢？简单的通过一个例子来对比一下：没有用useContext之前

import React  from 'react';

const NoHookContext = React.createContext(0);

function App(){
  return (
    <NoHookContext.Provider value={1}>
      <getValueView />
    </NoHookContext.Provider>
  )
}

function getValueView(){
  return(
    <NoHookContext.Consumer>
      {value=><div>{value}</div>}
    </NoHookContext.Consumer>
  )
}
export default App;

使用之后：

import React,{useContext}  from 'react';

const NoHookContext = React.createContext(0);

function App(){
  
  return (
    <NoHookContext.Provider value={1}>
        <getValueView/>
    </NoHookContext.Provider>
  )
}

function getValueView(){
  const value = useContext(NoHookContext);
  return(
    <div>
      {value}
    </div>

  )
}
export default App;

one more things...

8月更文挑战 ｜Hook 之 useContext 使用