web-dev-qa-db-ja.com

Reactでフックを使用して状態を事前に初期化するにはどうすればよいですか？

基本的にクラスコンポーネントでは、以下のような初期値でコンストラクターの状態を事前に初期化します。

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

しかし、フックが導入された後、すべてのクラスコンポーネントは状態を持つ機能コンポーネントになりました。

しかし、私のクエリは、React v16.7.0

javascriptreactjsreact-nativereact-hooks
7
Hemadri Dasari

ここにドキュメントがあります： https://reactjs.org/docs/hooks-state.html

ドキュメントの例は次のとおりです。

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

UseStateに渡されるパラメーター（この例では「0」）は初期値です。

2
Ryan Cogswell

Reactドキュメンテーションに従って、useStateフックに初期値を渡すことができます。

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

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

1
Omid Nikrah

これは、クラスとフックのある関数で状態を初期化する方法の例です。

基本的に、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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
1
Yangshun Tay