ReactHooks学习纪录01（useState）

ReactHooks是React16.8之后新增的特性，可以在Function组件中使用状态(state)以及生命周期

useStatea 可以在函数组件中使用状态（State）

• 一般的组件写法

import React, { Component } from 'react';
class Comp1 extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 }
  }
  addCount = () => {
    this.setState({ count: this.state.count+1})
  }
  render() {
    return (
      <div>
        <h2>点击了{this.state.count}次</h2>
        <button onClick={this.addCount}>点击+1</button>
      </div>
    )
  }
}
export default Comp1

• 使用useState之后

useState不能出现在条件判断语句中，因为它必须有完全一样的渲染顺序。

import React, {useState} from 'react';
function Comp2(){
  /*  
  if(xxx){
  	const [xx,setXx] = useState('x'); //报错   
  }
  */  
  ////0是count的默认值,setCount是修改count的函数，参数是修改后的值
  const [count, setCount] = useState(0); 
  //ES6 解构赋值  相当于
  /*
  const _useState=useState(0);
  let count = _useState[0];
  let setCount = _useState[1]
  */
  return (
    <div>
      <h2>点击了{count}次</h2>
      <button onClick={()=>{setCount(count+1)}}>点击+1</button>
    </div>
  )
}
export default Comp2;