尚硅谷react教程_扩展_stateHook

1.类式组件写

import React, {Component} from 'react';export default class Demo extends Component {state = {count:0}add = () => {this.setState(state=>({count:state.count+1}))}render() {return (<div><h2>当前求和为{this.state.count}</h2><button onClick={this.add}>点我+1</button></div>);}
}

 2.函数式组件写的

import React from 'react';// 函数式组件
function Demo() {const [count,setCount] = React.useState(0)const [name,setName] = React.useState('tom')// 加的回调function add() {// setCount(count+1) // 第一种写法// setCount((count)=>{ // 第二种写法//     return count+1// })setCount(count=> count+1) // 第二种写法的简写方式}// 修改名字function changeName() {setName('jack')}return (<div><h2>当前求和为:{count}</h2><h2>我的名字为:{name}</h2><button onClick={add}>点我+1</button><button onClick={changeName}>点我改名</button></div>)
}export default Demo;

State Hook
（1）State Hook让函数组件也可以有state状态，并进行状态数据的读写操作做
（2）语法：const [xxx,setXxx] = React.useState(initValue)
（3）useState()说明：参数：第一次初始化指定的值在内部作缓存返回值：包含2个元素的数组，第一个为内部当前状态值，第二个为更新状态值的函数
（4）setXxx()2种写法：setXxx(newValue)：参数为非函数值，直接指定新的状态值，内部用其覆盖原来的状态值setXxx(value => newValue)：参数为函数，接收原来的状态值，返回新的状态值，内部用其覆盖原来的状态值