阅读 470

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...

文章分类
前端