如何同步react

同步React组件状态的方法

使用useState和useEffect钩子组合可以同步React组件的状态。useState用于声明状态变量，useEffect用于监听状态变化并执行副作用。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

父子组件状态同步

通过props将父组件的状态传递给子组件，并在父组件中定义回调函数来更新状态。

function Parent() {
  const [value, setValue] = useState('');

  return (
    <div>
      <Child value={value} onChange={setValue} />
    </div>
  );
}

function Child({ value, onChange }) {
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

使用Context API同步全局状态

创建Context提供全局状态，使用useContext钩子在组件中访问和更新状态。

const CountContext = React.createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ChildComponent />
    </CountContext.Provider>
  );
}

function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

使用Redux管理同步状态

安装Redux相关库并创建store、reducer和actions来管理全局状态。

import { createStore } from 'redux';
import { Provider, useSelector, useDispatch } from 'react-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);

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

  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      {count}
    </button>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

使用自定义Hook同步状态

创建自定义Hook封装状态逻辑，实现状态在不同组件间的复用和同步。

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

function ComponentA() {
  const { count, increment } = useCounter();

  return (
    <button onClick={increment}>
      A: {count}
    </button>
  );
}

function ComponentB() {
  const { count, increment } = useCounter();

  return (
    <button onClick={increment}>
      B: {count}
    </button>
  );
}