react context如何使用

1. 创建Context

首先，你需要创建一个Context对象。这可以通过React.createContext方法完成。

// src/MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. 提供Context值

使用Context.Provider组件来提供上下文值。你可以将Context.Provider包裹在需要访问上下文的组件树的顶部，并通过value属性传递需要共享的数据。

// src/App.js
import React from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  const sharedData = {
    name: 'Kimi',
    age: 25
  };

  return (
    <MyContext.Provider value={sharedData}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default App;

3. 使用useContext Hook

在需要访问上下文的组件中，使用useContext Hook来获取上下文值。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const { name, age } = useContext(MyContext);

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

export default ChildComponent;

4. 使用useContext和useState结合

你也可以结合useState来更新上下文值。例如，你可以在Context.Provider中使用useState来管理状态，并通过value属性传递状态和更新状态的函数。

// src/App.js
import React, { useState } from 'react';
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  const [sharedData, setSharedData] = useState({
    name: 'Kimi',
    age: 25
  });

  return (
    <MyContext.Provider value={{ sharedData, setSharedData }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

export default App;

5. 在子组件中更新上下文值

在子组件中，你可以使用setSharedData来更新上下文值。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const { sharedData, setSharedData } = useContext(MyContext);

  const handleUpdate = () => {
    setSharedData({
      ...sharedData,
      age: sharedData.age + 1
    });
  };

  return (
    <div>
      <p>Name: {sharedData.name}</p>
      <p>Age: {sharedData.age}</p>
      <button onClick={handleUpdate}>Increment Age</button>
    </div>
  );
}

export default ChildComponent;

6. 使用useReducer和Context

如果你需要更复杂的状态管理逻辑，可以结合useReducer和Context。例如：

// src/MyContext.js
import React, { useReducer } from 'react';

const initialState = {
  name: 'Kimi',
  age: 25
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT_AGE':
      return { ...state, age: state.age + 1 };
    default:
      return state;
  }
};

const MyContext = React.createContext();

export const MyContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyContext;

7. 在子组件中使用useReducer和Context

在子组件中，你可以使用dispatch来更新状态。

// src/ChildComponent.js
import React, { useContext } from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  const { state, dispatch } = useContext(MyContext);

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT_AGE' });
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <button onClick={handleIncrement}>Increment Age</button>
    </div>
  );
}

export default ChildComponent;

8. 提供Context

确保在顶层组件中使用MyContextProvider来提供上下文。

// src/App.js
import React from 'react';
import MyContextProvider from './MyContext';
import ChildComponent from './ChildComponent';

function App() {
  return (
    <MyContextProvider>
      <ChildComponent />
    </MyContextProvider>
  );
}

export default App;