网络技术问题 | React.js 测验 |第 2 组 |问题 8

在React中，如何在组件之间共享状态？有哪些常见的共享状态的方法？

答案

在React中，组件之间可以通过以下几种方式共享状态：

1. 父组件向子组件传递props

父组件可以通过props向子组件传递数据。子组件可以读取props中的数据并在组件中使用它。这种方法非常适合父组件需要将状态向下传递给子组件的情况。

// 父组件向子组件传递props
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <ChildComponent count={count} />
  );
}

function ChildComponent(props) {
  return (
    <div>
      <p>Count is: {props.count}</p>
    </div>
  );
}

2. 上下文传递

上下文(Context)提供了一种跨组件层级共享数据的方法，这种方法可以避免通过props一层一层地传递数据。在上下文中，我们可以将数据定义一次，并在组件树中的任何位置进行访问。

// 上下文传递
const CountContext = React.createContext();

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <CountContext.Provider value={count}>
      <ChildComponent />
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const count = useContext(CountContext);

  return (
    <div>
      <p>Count is: {count}</p>
    </div>
  );
}

3. 使用Redux

Redux是一种状态管理库，可以帮助我们在React应用程序中管理共享状态。Redux将所有应用程序的状态存储在一个单一的中央存储库中，并提供一些方法来更新状态。Redux还提供了一种在React组件中方便地使用存储库中的状态的方法。

// 使用Redux
import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

function ParentComponent() {
  return (
    <div>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count is: {count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}

结论

React中共享状态的方法有很多种，我们可以根据业务需求选择最合适的方法来实现组件之间的数据共享。无论我们使用哪种方法，我们都应该确保共享的状态是可预测和可维护的。