React之Hook

1.Hook可以使你在无需修改组件结构的情况下,复用状态逻辑;

2.const  [count,setcount] = useState(0);//利用了数组解构的方法;

                              <1>.useState就是Hook,里面有两个参数,一个是count,它的初始值可以不为对象,并且这个初始值只有在组件第一次渲染时才会被用到;
                              useState里面的state在回调函数退出后就会被销毁,而类组件里面的state则会被React保留下来;
                              如果要用useState储存多个变量,只需要多次调用useState(),传入不同的参数即可;
                              在函数组件中使用state直接使用count即可;
                              另一个参数是函数,用来更新count初始值,你也可以在事件处理函数中或其他一些地方调用这个函数;
                              
                              <2>.useState不会把旧的state和新的state进行合并,而是直接替换旧的state;
 2.Hook不能在类组件中使用;
 
 3.react的内置Hook: useEffec是跟类组件中的生命周期函数具有一样的功能,只不过被合并成了一个API;
                         useEffect Hook可以看做,componentDidMount,componentUpdate,componentWillUnmount这三个函数的组合;
                         useEffect里面的回调函数默认会处理上一个effect,不用特地去使用componentUpdate去取消上一个订阅;
                         
 4.react会在每次渲染DOM后调用副作用函数(useEffect里面的回调函数),包括第一次渲染的时候;
 
 5.组件内声明的useEffect副作用函数,可以访问到组件内的props和state;
 
 6.Hook使用规则:
                   <1>.只能在函数最外层使用Hook,不要在循环、条件判断或者子函数中使用Hook;
                   <2>.只能在react组件或者自定义的Hook中调用Hook,不能在其他javascript函数中调用Hook;
                   
 7.useContext,不使用组件嵌套就可以订阅REACT的context,  const local=useContext(localcontext);
 
 8.useReducer,通过reducer来管理组件本地的复杂state,  const [todos,dispatch]=useReducer(todoreducer);
 
 9.useEffect性能优化:
                   在前后的state值未改变时,为避免多次调用effect,可以在useEffect回调函数后面传递一个数组作为useEffect的第二个可选参数,渲染时,会将前后数组中的值进行比较,如果两个数组中的值相等,React就会跳过effect,这就实现了性能的优化,如果两个数组不相等,React就会再次调用effect;
                   如果想执行只运行一次的effect(只在组件挂载和卸载时执行)可以传递一个空数组作为第二个参数,effect内部的props和state就会一直拥有其初始值;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值