我如何在 React 中使用钩子预初始化状态？

Question

基本上在 class 组件中，我们在构造函数中使用如下初始值预初始化状态。

     constructor(props){
          super(props);
          this.state = {
                 count: 0
          }
     }

但是在引入钩子之后，所有 class 组件都变成了具有状态的功能组件。

但我的问题是如何在 React v16.7.0 中使用钩子将计数状态预初始化为 0

Answer 1

这是文档： https://reactjs.org/docs/hooks-state.html

文档中的示例显示：

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

传入useState的参数（本例中为“0”）为初始值

Answer 2

根据 React 文档，您可以将初始值传递给 useState 挂钩。

const [state, setState] = useState(initialState);

https://reactjs.org/docs/hooks-reference.html#usestate

Answer 3

下面是类与带钩子的函数相比如何初始化状态的示例：

基本上，useState()的第一个参数是初始状态。

class CounterClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return <div>
      <strong>Class: </strong>
      <span>Count: {this.state.count}</span>&nbsp;
      <button onClick={() => this.setState({ 
        count: this.state.count + 1
      })}>Increase</button>
    </div>;
  }
}

function CounterFunction() {
  const [count, setCount] = React.useState(0); // Initial state here.
  return (
    <div>
      <strong>Function: </strong>
      <span>Count: {count}</span>&nbsp;
      <button onClick={() => 
        setCount(count + 1)}
      >Increase</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <CounterClass />
    <hr/>
    <CounterFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Answer 4

如果您想在加载数据后设置初始状态（从 api 获取数据），您可以在 React 挂钩中使用“useEffect”。它等于 class 组件中的“componentWillReceiveProps”。因此，当您在 useEffect 中设置状态值时，请确保避免无限循环，例如 ..

const [count,setcount] = useState(0) 

 useEffect(()=>{
    setcount(api.data.count) // api.data.count from api after update store
  },[])

我如何在 React 中使用钩子预初始化状态？

How can I pre initialise state with hooks in React?

javascript

reactjs

react-native

react-hooks