useState的使用

Hooks 是 React 16 中的特性，解决函数组件想使用类组件的一些特性。
useState是react自带的一个hook函数，它的作用是用来声明状态变量。

从三个方面来看useState的用法，分别是声明、读取、使用（修改）。

• 声明的方式

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

useState(params) 设置 第一个参数的初始值 
count 是解构出的第一个参数 
setCount 是第二个参数 是一个函数 用来设置count 

• 读取状态中的值

<p>You clicked {count} times</p>

• 改变State中的值

<button onClick={()=>{setCount(count+1)}}>click me</button>

使用USESTATE的赋值函数异步更新问题
随着count的更新，实时累加更新sum的值。
却发现在执行setSum后，打印sum的值为上一次得到的和。
究其原因，猜测是因为setSum异步了，导致打印的sum是还未计算完成的上一次的值。
import React, {useState,useEffect} from “react”;

export default function Example() {
    // 声明一个叫 "count" 的 state 变量
    const [count, setCount] = useState(0);
    const [sum, setSum] = useState(0);
    useEffect(()=>{
            setSum(sum+count);
    },[count])；
  //  useEffect(()=>{
  // 	console.log(sum);
 //	},[sum])
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}   
解决方式：再写一个副作用Hook，只用于监视sum值的变化，从而进行操作
useEffect(()=>{
    console.log(sum);
},[sum])

useState 和 useEffect 的区别

• useState

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

useState(params) 设置 第一个参数的初始值
count 是解构出的第一个参数
setCount 是第二个参数 是一个函数 用来设置count
操作 setCount(count + 1);count 为最新的值

• useEffect

useEffect(() => {

},[])

接受2个参数，第一个是函数，第二个是数组
如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染
如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染
useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新都触发。
相同点： useState 和 useEffect 支持写多个，例如：

const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(() => {

},[])
useEffect(() => {

},[xxx])

在类组件中使用状态通过 state 定义

import React from 'react';    
class Counter extends React.Component {    
  state = {    
    number: 0    
  }    
  handleClick = () => {    
    this.setState({    
      number: this.state.number + 1    
    })    
  }    
  render() {    
    return (    
      <>    
        <p>{this.state.number}</p>    
        <button    
          onClick={ this.handleClick }>    
          加一
        </button>    
      </>    
    );    
  }    
}    
function render() {    
  ReactDOM.render(<Counter />, document.getElementById('root'));    
}    
render()

在函数组件中使用状态通过 state 定义

import React, {useState} from 'react';    
function Counter() {    
  const [    
    number,    
    setNumber    
  ] = useState(0)    
  return (    
    <>    
      <p>{number}</p>    
      <button    
        onClick={    
          () => setNumber(number + 1)    
        }    
      >    
        加一    
      </button>    
    </>    
  )    
}    
function render() {    
  ReactDOM.render(<Counter />, document.getElementById('root'));    
}    
render()