前言

在日常项目中，useContext的使用场景挺多的，父子组件传参，传递方法，但每次使用都需要搜一下文章进行参照，而且有很多不同的使用方法，现根据自己的实践进行总结，加深印象～

正文

1. 组件之间传递参数

1. 父组件向子组件传参(包括变量和方法)

//父组件
    import myContext from '@/utils/createContext';
    <myContext.Provider value={{ modalVisible, applyObj, now, queryData }}>
        <ApplayPermission />
    </myContext.Provider>

//子组件
import myContext from '@/utils/createContext';
const modalData: any = useContext(myContext);
  
useEffect(() => {
    // console.log(modalData);这里是接收到的父组件传过来的参数
}, [modalData.now]);

2. 父组件向子组件传参(通过props)

//父组件
import Child from './component/child';
<Child value={toChildMsg} click={toChildFuc} />

//子组件
export default (props: any) => {
  const { value, click } = props;
  return (
    <div onClick={click}>
      子组件{value}
    </div>
  )
}

3. 子组件向父组件传参（方法）

//子组件向父组件传递方法，即父组件中调用子组件的方法

//子组件
export default(cRef)=>{
    useImperativeHandle(cRef, () => ({
    // changeVal 就是暴露给父组件的方法
    changeVal: () => {
      // console.log()
    },
  }));
}

//父组件中
  const childRef = useRef();
  const updateChildState = () => {
    // changeVal就是子组件暴露给父组件的方法
    childRef.current?.changeVal();
  };
  
  <ApplayPermission cRef={childRef} />
  

4. 子组件向父组件传递变量（通过方法传递参数）

//父组件
  const changeRisk = useCallback((key, type, name) => {
    console.log(key, type, name);
    //key,type,name 就是从子组件传递过来的变量
  }, []);
<RiskTable changeRisk={changeRisk} />

//子组件

  const { changeRisk } = props;
  const childClick = useCallback(
    (key, type, name?) => changeRisk(key, type, name),
    [changeRisk],
  );
  
  <a onClick={() => childClick(record.parentCode, 'add_brother')}>
    添加同级标
  </a>
          

2. React Hook 中 createContext & useContext 跨组件透传上下文与性能优化

（后续待完善..）