反应如何在不同组件中使用状态

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// store.js
import { createStore } from 'redux';

const initialState = { count: 0 };

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

const store = createStore(reducer);

export default store;

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Click me
      </button>
    </div>
  );
}

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

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

export const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
};

// App.js
import React, { useContext } from 'react';
import { MyContext, MyProvider } from './MyContext';

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

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Click me
      </button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <Counter />
    </MyProvider>
  );
}

import React, { memo } from 'react';

const MemoizedCounter = memo(Counter);