React useContext和传统的props传参二种方法的思考

一、useContext

   （一）useContext的应用场景：

       我的理解适合两种场景：

      1.全局状态的定义，即可以被不同层级的组件所需要。

      2.多个组件之间传参（他们之间可能是跨多层级即祖孙关系传参）时。

     如果普通的父子组件之间传参，即父子组只有单纯的一层时，用props传参更省事，useContext反而不是最佳的选择，官方也是这样推荐的（建议用组合组件来完成传参）。

   （二）useContext的用法：

          步骤一：上层组件树去用 <MyContext.Provider> 定义为下层组件需要的context(上下文，你可能理解为参数state）；

const MyContext = React.createContext(defaultValue);
<MyContext.Provider value={/* 某个值 */}>

示例：

const ThemeContext = React.createContext(themes.light);
function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

         注意：React.createContext(null)的初始参数可以为空，这个初始值测试时才有意义。

     步骤二：下层组件中用useContext(MyContext)去声明需要订阅上层组件的context的变化;

function ThemedButton() {
  const theme = useContext(ThemeContext); 
  return (   
      <button style={{ background: theme.background, color: theme.foreground }}>
          I am styled by theme context!    
      </button>  );
}

二、父子组件props传参法：

   对于函数组件，一样可以实现用父子组件props来完成传参，特别是对于简单的只有一层的父子组件之间传参，我个人更喜欢采用props来传参。

示例：

父组件的定义：

子组件的定义：

标签：传参,父子,React,useContext,props,组件
来源： https://blog.51cto.com/u_10976476/2845734