关于前端:react-里面的context

34次阅读

共计 1694 个字符，预计需要花费 5 分钟才能阅读完成。

在 React 中，Context 是一种跨组件传递数据的机制，它通过创立一个不通明的父子组件嵌套层级来传递数据。Context 有以下属性：

Provider：Provider 是 Context 的生产者，它通过 value 属性向下传递数据给子组件。当 Provider 中的数据发生变化时，所有订阅者都会收到告诉并从新渲染。
Consumer：Consumer 是 Context 的消费者，它会订阅 Context 的变动，而后在子组件中应用该数据。当 Provider 中的数据发生变化时，所有与该 Context 相干的 Consumer 都会从新渲染。
defaultValue：defaultValue 属性能够在没有对应 Provider 时应用。当一个组件在没有父组件的状况下应用 Context 时，它将应用 defaultValue 属性的值。
displayName：displayName 属性是一个可选的字符串属性，它能够用来调试和显示在 React 的调试工具中，目标是为了查看 Context 以后在哪个组件中。
useContext Hook：useContext 是一个 React 的 Hook 函数，它能够让咱们在函数组件中应用 Context，防止了传递多层 props 的麻烦。

这些属性一起形成了 React 中的 Context 机制，使得咱们可能在任何组件之间共享数据，并使得组件树的某一部分不用通过两头组件传递 props 即可获取所需的数据。这种数据共享机制，让 React 的开发变得更加便捷和灵便

要应用 Context 开发组件，须要先创立一个 Context 对象。能够应用 React.createContext 函数创立一个 Context 对象，该函数承受一个默认值作为参数。

import React from 'react';

const MyContext = React.createContext('defaultValue');

而后，创立一个 Provider 组件，负责向下传递 Context 数据给后辈组件。能够通过设置 value 属性向后辈组件传递数据。

<MyContext.Provider value={/* context value */}>
  <ChildComponent />
</MyContext.Provider>

子组件能够通过应用 Consumer 组件来拜访 Context。Consumer 接管一个函数作为子元素，这个函数承受 Context 值作为它的参数。函数返回一个 React 元素并将其用作它的子元素。

<MyContext.Consumer>
  {contextValue => /* render something based on the contextValue */}
</MyContext.Consumer>

在函数组件中，能够应用 useContext hook 来拜访 Context。

import React, {useContext} from 'react';
import MyContext from './MyContext';

function ChildComponent() {const contextValue = useContext(MyContext);
  return <div>{contextValue}</div>;
}

当 Provider 的 value 值发生变化时，其下所有 Consumer 组件会从新渲染。

总之，Context 容许咱们在组件树中间接传递数据，进步了组件之间的数据共享效率。不过在应用 Context 时须要留神使其不致于适度应用，因为 Context 的数据共享是全局的，若使用不当容易毁坏组件的原子性，导致代码难以保护，React 并不举荐咱们优先思考应用 Context，是因为应用Context 会让组件变得更加耦合性强，难以保护和测试。相同，React 更加举荐应用 props 进行数据流传递，应用 props 能够使组件之间更加独立和可重用，同时也更容易进行单元测试和调试。应用 Context 应该作为非凡状况下的备选计划，例如在多层级嵌套的组件中须要传递数据，或者须要在利用的某些中央共享一些全局数据时。总之，应用 Context 须要审慎，依据具体情况进行衡量。
。

正文完