React 16.3.1+Redux-Saga如何无需逐层传参给嵌套子组件？

嘿，这个逐层传递dog属性的问题确实挺头疼的，尤其是组件嵌套层级多的时候，代码会变得冗余又难维护。结合你使用的React 16.3.1、Redux技术栈，这里有几个实用的方案可以帮你摆脱这种“prop drilling”（属性透传）的困扰：

1. 直接在子组件中连接Redux Store #

既然你已经在用Redux，最直接的方式就是让需要dog属性的子组件（比如App2）直接通过connect高阶组件从Store中获取状态，完全跳过中间组件的传递步骤。

比如修改App2.js：

import { connect } from 'react-redux';

function App2(props) {
  return <div>{props.dog}</div>;
}

const mapStateToProps = (state) => {
  return {
    dog: state.dog // 根据你的Store结构调整这里的取值路径
  };
};

export default connect(mapStateToProps)(App2);

这样一来，App和App1都不需要再传递dog属性了，App2直接从Redux Store拿到需要的数据，简洁又高效。

2. 使用React Context API（适配React 16.3.1） #

React 16.3.1正好是稳定版Context API发布的版本，这专门就是用来解决prop drilling问题的。你可以创建一个Context，在顶层组件提供数据，然后任意层级的子组件都能直接获取。

步骤1：创建Context #

新建一个DogContext.js文件：

import React from 'react';

// 创建Context，可传入默认值（可选）
const DogContext = React.createContext();

export default DogContext;

步骤2：在顶层组件提供Context数据 #

修改App.js，用Context的Provider包裹子组件，传递dog属性：

import DogContext from './DogContext';

// ... 其他代码
render(){
  return (
    <div>
      {/* 用Provider包裹需要共享数据的组件树 */}
      <DogContext.Provider value={this.props.dog}>
        <App1 />
      </DogContext.Provider>
      ...
    </div>
  );
}

const mapStateToProps = (state) => ({
  dog: state.dog
});
export default connect(mapStateToProps)(App);

步骤3：在子组件中消费Context #

修改App2.js，直接获取Context中的dog：

import React from 'react';
import DogContext from './DogContext';

// 函数组件用Consumer
function App2() {
  return (
    <DogContext.Consumer>
      {dog => <div>当前的dog是：{dog}</div>}
    </DogContext.Consumer>
  );
}

// 如果是类组件，还可以用static contextType
// class App2 extends React.Component {
//   static contextType = DogContext;
//   render() {
//     return <div>当前的dog是：{this.context}</div>;
//   }
// }

export default App2;

这样不管App2嵌套多深，都能直接拿到dog，不用中间组件帮忙传递。

3. 优化：结合Reselect提升性能（可选） #

如果你的Store比较复杂，或者多个组件都需要获取类似的状态，可以用reselect库创建缓存的选择器，避免不必要的重渲染。

安装reselect后，创建一个选择器文件：

import { createSelector } from 'reselect';

const selectDogState = state => state.dog;

export const selectDog = createSelector(
  [selectDogState],
  dog => dog
);

然后在组件的mapStateToProps中使用这个选择器：

import { selectDog } from './selectors';

const mapStateToProps = (state) => {
  return {
    dog: selectDog(state)
  };
};

这个方案主要是优化性能，配合前面的两种方案使用效果更好。

内容的提问来源于stack exchange，提问作者Reaksmey