React - 父子组件的信息传递

简单介绍一下三种方法

一、Provider 和 Consumer

React其实提供了一个全局注入变量的API，这就是context api。

1. 使用React.createContext创建一个context

// 我们使用一个单独的文件来调用createContext
// 因为这个返回值会被Provider和Consumer在不同的地方引用
import React from 'react';

const TestContext = React.createContext();

export default TestContext;

2. 使用Context.Provider包裹根组件

创建好了context，如果我们要传递变量给某些组件，我们需要在他们的根组件上加上TestContext.Provider，然后将变量作为value参数传给TestContext.Provider:

import TestContext from './TestContext';

const content = "111"

const contextValue = {
	content
}

ReactDOM.render(
  <TestContext.Provider value={contextValue}>
  	<App />
  </TestContext.Provider>,
  document.getElementById('root')
);

3. 使用Context.Consumer接收参数

上面我们使用Context.Provider将参数传递进去了，这样被Context.Provider包裹的所有子组件都可以拿到这个变量，只是拿这个变量的时候需要使用Context.Consumer包裹

// 注意要引入同一个Context
import TestContext from './TestContext';

// 返回的JSX用Context.Consumer包裹起来
// 注意Context.Consumer里面是一个方法，这个方法就可以访问到context参数
// 这里的context也就是前面Provider传进来的contextValue，我们可以拿到上面的content变量
return (
    <TestContext.Consumer>
      {context => 
        <>
          <h3>{context.content}</h3>
        </>
      }
    </TestContext.Consumer>
  );

二、Provider 和 useContext

除了上面的Context.Consumer可以用来接收context参数，新版React还有useContext这个hook可以接收context参数，使用起来更简单

const context = useContext(TestContext);

return (
    <>
     <h3>{context.content}</h3>
    </>
);

三、React-Redux

首先，redux并不是必须的，它的作用相当于在顶层组件之上又加了一个组件，作用是进行逻辑运算、储存数据和实现组件尤其是顶层组件的通信。

如果组件之间的交流不多，逻辑不复杂，只是单纯的进行视图的渲染，这时候用回调，context就行，没必要用redux，用了反而影响开发速度。

但是如果组件交流特别频繁，逻辑很复杂，那redux的优势就特别明显了。

let store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);


const mapStateToProps = (state) => {
  return {
    content: state.content,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onClick: () => {
      dispatch(addContent());
    },
  };
};

const TestComponents = connect(mapStateToProps, mapDispatchToProps)(TestWord);

export default TestComponents;

这样子组件就可以用connect和全局的store传递信息，也就可以用dispatch改变store。

参考链接
Ant Design Pro V5精讲（基础篇五）：useContext
react-pxq