函数式组件rsf的特点及Hook介绍useState更新变量

vlambda
2022-03-14

函数式组件rsf的特点及Hook介绍useState更新变量

函数式组件没有生命周期；
函数式组件没有this;
函数式组件没有state/setState;
Hook给了函数式组件第二次生命，使函数式组件越来越流行；
与类组件相比，函数式组件很灵活

Hook(钩子)两个来源，react官方/用户自定义。

hook只能用在文件的最顶层
hook是函数；

第一个Hook useState

其中的

//这行代码是关键，把变量和改变量的方法都给了勾子，然后调用改变量的方法实现变更
let [msg,setMsg] = useState(0);

import {useState} from 'react';
function App04(props) {
 //这行代码是关键，把变量和改变量的方法都给了勾子，然后调用改变量的方法实现变更 let [msg,setMsg] = useState(0);
 const fn = (value) => { setMsg(value); } return ( <div> <h1>{msg}</h1> {/*用匿名函数实现*/} <button onClick={()=>setMsg(msg+=1)}>++1</button> {/*用非匿名函数实现*/} <button onClick={()=>fn(msg+=2)}>++2</button> </div> );}
export default App04;