React中useContex和props

React hooks 中的useContext()

useContext()可以实现组件之间的共享状态（通信) , 可以实现父子之间的通信,props也可以实现组件之间的共享状态

useContext用法:
react使用函数组件,两种用法的组件关系都是

export default function App() {
  const AppContext = React.createContext({});
  function Com1(){
    return(
      <Com3></Com3>
    )
  }
  const Com2 = ()=>{
    const {userName} = useContext(AppContext)
    return(
      <p>com2:{userName}</p>
    )
  }
  const Com3 = ()=>{
    const {userName} = useContext(AppContext)
    return(
      <p>com3:{userName}</p>
    )
  }
  return(
    <AppContext.Provider value={{userName:'hello'}}>
      <div>
        <Com1></Com1>
        <Com2></Com2>
      </div>
    </AppContext.Provider>
  )
}

• 首先，在父组件(App)中创建 const AppContext = React.createContext({}) —说父组件其实不太准确，因为可能是跨了很多层的，应该表述为，需要共享状态的组件的最外层
• 在需要共享状态的子组件外层加上 <AppContex.Provider value = {{userName:‘hello’}}> 子组件<AppContext.Provider>
• 下层组件如果内部需要引用这个状态的话，需要使用const {userName} = userContext(AppContext),这样就可以简单的得到上层组件定义的状态（值）;
• 如果孙组件(com3)，或者更下层组件想要引用这个状态的话，之间加上 const {userName} = useContex(AppContex)即可获得。不需要父组件的传输。

props的用法

export default function App() {
  const name = 'hello'
  const Com1 = (props)=>{
    return(
      <Com3
        userName = {props.name}
      />
    )
  }
  const Com2 = (props)=>{
    const {userName} = props.name
    return(
      <p>com2:{userName}</p>
    )
  }
  const Com3 = (props)=>{
    const {userName} = props.name
    return(
      <p>com3:{userName}</p>
    )
  }
  return(
      <div>
        <Com1 
          name = {name}
        />
        <Com2 
          name = {name}
        />
      </div>
  )
}

• 引用子组件时，在子组件的内部加上需要传输的值。例如：<Com1 name='hello" />
• 定义子组件时加上props，const Com1 = (props) =>{}
• 子组件如何获取props的值 , const userName = props.name ；props.name里的name必须和引用子组件里传入的名字相同
• 如果Com3想要引用App里定义的name , 必须通过Com1，即：如果孙组件以及再下层组件想要引用最上层组件的状态，必须层层传输（即孙组件想要共享状态，必须经过父组件的传输）。

总结

1. props和useContext都可以实现组件之间的共享状态
2. props传输的值需要层层传输，即下层组件想要共享状态，必须是上层组件一个一个传下来的，不能跳级传。
3. 使用useContext，无论有多少层子组件，他们都可以直接获取最上层定义的值，所以下层组件要共享状态无需通过上传组件的传输。
4. 最后，如果在只有一层或两层的少量层数组件通信时，采用props是比较简单的方法，而当有多层组件，且有写组件用不到这个状态时，写useContext是比较好的方法。