react_hooks系列 useState

一、作用：

useState让函数式组件也可以处理状态。

二、格式：

1、定义状态：
const [状态名，更新状态的函数] = React.useState(初始值|函数);
​
如：
1）、基本类型的状态
声明一个新的叫做 “count” 的 state 变量，初始值为0 。
​
const [count, setCount] = React.useState(0); //useState函数返回的是数组
​
相当于类组件中的
this.state={
    count :0
}
​
2）、引用类型的状态
const [person, setPerson] = React.useState({name: '张三疯', age: 18,sex:"女"})
const [person, setPerson] = React.useState(() => ({name: '张三疯', age: 18,sex:"女"}))
​
2、读取值：
{count}
{person.name}   {person.age}
​
3、修改值：  
  setCount(5);
  //对于引用类型，不能局部更新（即：不能只改某个属性），所以，需要使用扩展运算符先拷贝以前所有的属性
  setPerson({
     ...person, //拷贝之前的所有属性
     age:person.age+1,
     name: '张四疯' //这里的name覆盖之前的name

注意：

首先，需要知道，函数式组件重新渲染时，会执行函数里的所有代码，

那么，当函数式组件重新渲染时，会不会再次把状态的值恢复成初始值呢？答案是：不会。后续组件重新渲染时，会使用最后一次更新的状态值

【官网解释： React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化 】

三、示例代码：

import React,{useState} from 'react';
function App() {
// 声明一个叫 "count" 的 state 变量
  const [count,setCount] = useState(0); //在App组件重新后，useState 返回的第一个值将始终是更新后最新的 count。return (
    <div className="App">
      <p>{count}</p>
      <input type="button" value="测试" onClick={()=>{setCount(count+1)}} />
    </div>
  );
}
对应的函数class组件：
class App extends React.Component {
  state = {
      count:0
  }
  render = () => (
    <div>
       <p>{this.state.count}</p>
       <input type="button" value="测试" 
            onClick={()=>this.setState({count:this.state.count+1})} />
    </div>
  )
}

我们之前把函数式的组件叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力。

function App() {
  const [person, setPerson] = React.useState({name: '张三疯', age: 18})
 
  const onClick = () =>{
    //setPerson不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖，所以，需要使用扩展运算符先拷贝以前所有的属性
    setPerson({
        ...person, //拷贝之前的所有属性
        age:person.age+1,
        name: '张四疯' //这里的name覆盖之前的name
    })
  }
  return (
    <div className="App">
        <p>name:{person.name}</p>
        <p>age:{person.age}</p>
        <input type="button"  value="测试" onClick={onClick} />
    </div>
  );
}