React Context 是道具钻探的解药吗？

如果 React Context API 旨在用于传递全局变量，那么我们为什么要使用它们来替代从父组件到子组件传递 props（prop 钻取）？由于大多数传递的 props 并不意味着在应用程序范围内（即全球范围内）可用。

上下文中定义的变量或值可供任何尝试解构这些值的组件使用。但是，如果您有任何设置器更改这些定义的值，则只有传递给Provider将获得更新的值。

例如，如果我们创建一个上下文myContext并定义name and age，然后我们必须设置一个提供者，为其子级提供要使用的信息。

const myContext = createContext({ 
  name: 'Bob',
  age: 35
});

现在，我们可以使用 Provider 将数据传递给子级。

function HelloWorld() { 
 const { Provider } = myContext;
 const [age, setAge] = useState(35)
 const [name, setName] = useState('Bob') 
 return (
   <Provider value={{ name, age }}>
     <Profile />
   </Provider>
 )
}

name and age是我们想要向孩子们展示的价值观，在这种情况下我们只有一个孩子Profile。现在我们可以访问name and age in Profile通过从我们的背景中解构它们。

function Profile(){
 const { name, age } = useContext(myContext)

 return (
  <ul>
   <li>{name}</li>
   <li>{age}</li>
  </ul>
 )
}

但是假设在我们项目的其他地方我们有一个名为Foo我们想要访问name.

function Foo() {
 const { name } = useContext(myContext) // you will only receive the default values defined in context
 return <p>{name}</p>
}

这将返回在中定义的默认“Bob”myContext。你可能会想，那有什么意义呢？

如果我们更新我们的HelloWorld组件来实际更新name and age在安装上，Foo仍会显示Bob.

function HelloWorld() {
  const { Provider } = myContext;
  const [age, setAge] = useState("");
  const [name, setName] = useState("");
  useEffect(() => {
    setAge(40);
    setName("Bill");
  }, []);
  return (
    <Provider value={{ name, age }}>
      <Profile />
    </Provider>
  );
}

function Profile() { 
 return ( 
  <ul>
    <li>{name}</li> // returns Bill
    <li>{age}</li>  // returns 40
  </ul>
 )
}

function Foo() { 
 return (
  <p>{name}</p> // returns Bob 
 )
}

当您有独立的功能或组件需要传递数据和设置器而不是支柱钻孔时，这非常有用。您可以让一个组件使用多个上下文，并且您可以拥有任意数量的上下文，只要它们有意义即可。如果你只传递一个 prop 一次，那么使用上下文是没有意义的。如果你有更复杂的道具传递，上下文可能是值得的。