react 如何改变 props

在 React 中，props 是只读的，直接修改父组件传递的 props 会违反 React 的设计原则。但可以通过以下方法间接实现类似效果：

使用状态提升

将需要修改的数据提升到父组件中管理，通过回调函数让子组件触发父组件的状态更新。父组件更新后，新的 props 会传递给子组件。

// 父组件
function Parent() {
  const [value, setValue] = useState('initial');

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

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

使用本地状态派生

在子组件内部使用 useState 或 useMemo 派生一个本地状态，初始值来自 props。当 props 变化时通过 useEffect 同步更新本地状态。

function Child({ externalValue }) {
  const [localValue, setLocalValue] = useState(externalValue);

  useEffect(() => {
    setLocalValue(externalValue);
  }, [externalValue]);

  return <input value={localValue} onChange={e => setLocalValue(e.target.value)} />;
}

使用 ref 存储可变值

对于需要在组件实例生命周期内持久化但不需要触发渲染的可变值，可以使用 useRef。这种方式不会触发重新渲染。

function Child({ initialValue }) {
  const mutableValue = useRef(initialValue);

  const handleClick = () => {
    mutableValue.current = 'new value';
  };

  return <button onClick={handleClick}>Change Ref</button>;
}

使用 Context API

对于深层嵌套组件，可以通过 Context 提供共享状态和更新方法，避免层层传递 props。

const ValueContext = createContext();

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

  return (
    <ValueContext.Provider value={{ value, setValue }}>
      <Child />
    </ValueContext.Provider>
  );
}

function Child() {
  const { value, setValue } = useContext(ValueContext);

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

每种方法适用于不同场景：状态提升适合父子组件简单通信；本地状态派生适合需要缓存 props 的情况；ref 适合存储可变但不影响渲染的值；Context 适合跨多级组件共享状态。