react篇4--setState、LazyLoad和Hooks

先新建一个项目准备以下文件一、setState对象式setState()案例为点击按钮让页面中的数据加1的效果。其实setState()更新状态是异步的。准确地说setState()是同步地但是引起数据状态变化的动作是异步的。效果如下setState()方法除了上面的写法setState()也可以传两个参数第一个参数还是数据对象第二个参数为函数状态改变函数第二个参数的函数在状态更新完毕render()执行完后被调用。函数式setState()setState()还有一种写法是函数的setState()。也有两个参数第一个参数是函数该函数返回state改变后的状态第二个参数也是函数也是状态更新完render()执行完之后被调用。注意第一个参数函数可以接收两个值state、props总结若是新状态不依赖原状态则使用对象式setState()否则使用函数式setState()更方便不是必须只是不用手动获取state。二、LazyLoad懒加载最多的使用场景是路由组件的懒加载。这样会造成资源的浪费需要实现点击一个路由组件加载一个的方式即实现路由组件的懒加载。三、HooksHooks时react16.8版本增加的新特性可以在函数组件中使用state以及其他的react特性。之前说过函数式组件没有this不能使用对象实例的特性除了props。函数式组件也不能用生命周期函数。Hooks可以解决这些问题。在之前一、setState的例子的基础上进行修改。有三个常用的Hook分别为React.useState()、React.useEffect()、React.useRef()。useState()useState()方法返回两个参数第一个参数是数据第二个参数是更新数据的方法方法的参数是返回值第一个参数的初始值。注意每一次点击按钮函数组件Demo都会被调用一次,react底层做了处理只有第一次执行的时候才会执行“const [count,setCount] React.useState(0)”进行初始化操作。改变数据的方法setCount也有两种写法。另一种写法也是传递一个函数该函数参数为旧值返回值为修改后的值。useEffect()useEffect()使得函数组件中可以使用生命周期函数。用一个例子说明。函数式组件中没有componentDidMount()方法。React.useEffect()方法有两个参数第二个可选第一个参数表示执行的操作第二个参数是一个数组表示检测的setState的数据。第二个参数不穿React.useEffect()指定的第一个参数的方法类似于类组件的生命周期函数componentDidUpdate()。所以可以看出不传第二次参数类似于类组件的传空数组类似于类组件的componentDidMount()。之前在类组件还有一个案例若是组件被卸载了需要把定时器清楚类组件是在生命周期函数componentWillUnmount()中卸载定时器的。函数组件中若想实现componentWillUnmount()的效果需要把React.useEffect()的第一个参数函数的返回值为一个函数这个函数相当于componentWillUnmount()。可以把useEffect()看成componentDidMount()、DidUpdate()与componentWillUnmount()的结合。useRef()在之前的点击按钮弹出用户的输入内容的例子中类组件中一个组件(button)要获得另一个组件input的value值需要需用ref属性。函数式组件中需要使用useRef()。