有没有在React Hooks中设置状态的通用方法？

Question

我有一个问题，是否可以像在React Components中那样在React Hooks中使用通用的“ useState”？

在React Components中，我可以这样：

handleChange(event) {
  const {name, value} = event.target
  this.setState({
    [name]: value
  })    
}

在React Hooks中甚至有可能实现吗？

Answer 1

是的，通过钩子，您可以通过两种（可能更多）方式管理复杂状态：

1. 管理具有多个状态的单个对象。
2. 如果（useReducer太复杂，则使用1。

查看此example：

const [statesManager, setStatesManager] = useState(complexStateInitial);

const [state, dispatch] = useReducer(reducer, complexStateInitial);

const onChangeUseState = e => {
  const { name, value } = e.target;
  setStatesManager(prevState => ({ ...prevState, [name]: value }));
};

const onChangeUseReducer = e => {
  const { name, value } = e.target;
  dispatch({ type: name, value });
};

注释

• 为简化起见，有一个代码重复。

• 与类组件中的setState方法不同，useState不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合在一起来复制此行为：

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

请参阅React Docs

Answer 2

正确的方法是创建自己的内部使用useState的钩子。

这里是一个例子：

// This is your generic reusable hook.
const useHandleChange = (initial) => {
  const [value, setValue] = React.useState(initial);
  const handleChange = React.useCallback(
    (event) => setValue(event.target.value), // This is the meaty part.
    []
  );
  return [value, handleChange];
}

const App = () => {
  // Here we use the hook 3 times to show it's reusable.
  const [value1, handle1] = useHandleChange('one');
  const [value2, handle2] = useHandleChange('two');
  const [value3, handle3] = useHandleChange('three');
  return <div>
    <div>
      <input onChange={handle1} value={value1} />
      <input onChange={handle2} value={value2} />
      <input onChange={handle3} value={value3} />
    </div>
    <h2>States:</h2>
    <ul>
      <li>{value1}</li>
      <li>{value2}</li>
      <li>{value3}</li>
    </ul>
  </div>
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="app"></div>

请注意使用React.useCallback来阻止您的钩子在每个渲染器上返回新的处理函数。 （我们不需要将setValue指定为依赖项，因为React保证它永远不会改变）

Answer 3

我实际上没有对此进行测试，但是应该可以。

有关更多信息，请参见https://reactjs.org/docs/hooks-reference.html#usestate。

import React, {useState} from 'react';

const MyComponent = () => {
    const [name, setName] = useState('Default value for name');
    return (<div><button onClick={()=>setName('John Doe')}}>Set Name</button></div>);
};
export default MyComponent;