![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
学习React Hooks
React Hooks
Blank0411
少年,未来可期的意思是:你得从现在开始努力!
展开
-
React Hooks -- useMemo,useCallback
useMemo 主要用来解决使用React Hooks产生的无用渲染的性能问题,使用function的形式声明组件失去了shouldComponentUpdate(组件更新之前)这个声明周期,也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中,也不再区分mount和update两种状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,带来了非常大的性能损耗。 useMemo 和 useCallback都是解决上述性能问题的。 useMemo和useCallback都会在组件第一原创 2020-11-09 16:44:39 · 114 阅读 · 0 评论 -
React Hooks --useReducer
为了更好的理解useReducer,所以先要了解Javascript里的Reducer是什么。reducer其实就是一个函数,这个函数接受两个参数,一个是状态,一个用来控制业务逻辑的判断参数。 如下所示: function countReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'sub': return原创 2020-11-09 15:27:38 · 96 阅读 · 0 评论 -
学习ReactHooks--useContext
useContext的作用就是对它所包含的组件树提供全局共享数据的一种技术。 在用类生命组件时,父子组件的传值是通过组件属性和props进行的,那现在使用方法(Function)来声明组件,已经没有了constructor构造函数,也就没有了props的接收,那父子组件之间的传值也就成了一个问题。React Hooks为我们准备了useContext。 useContext其实总共分两步: 1.createContext函数创建context 2.useContext接收上下文变量 1.createCont原创 2020-11-09 15:16:50 · 129 阅读 · 0 评论 -
React Hooks --useEffect
再用class写组件时,经常会用到生命周期函数,来处理一些额外的事情(副作用:和函数业务主逻辑关联不大,特定时间或事件中执行的动作,比如请求后端数据,修改Dom等)在React HookS中也需要类似的生命周期函数,useEffect由此诞生。 由class的形式,声明一个组件,并增加两个生命周期函数componentDidMount和componentDidUpdate import React, { Component } from 'react'; class Example3 extends Co原创 2020-11-09 14:54:50 · 647 阅读 · 0 评论 -
React Hooks --useState
useState是React自带的一个hook函数,它的作用是用来声明状态变量。 上一篇文章中,useState的声明方式如下: const [count, setCount] = useState(0); 这种方法是ES6语法中的数组结构,如果不写成数组结构,上边一句话要写成下面的三行: let _useState = userState(0) let count = _useState[0] let setCount = _useState[1] useState这个函数接受的参数是状态的初始值(i原创 2020-11-09 14:31:24 · 124 阅读 · 0 评论 -
初识React Hooks
React Hooks就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state,有了Hooks可以不再使用类的形式定义组建了。 react原始开发形式: import React, { Component } from 'react'; class Example extends Component { constructor(props) { super(props); this.state = { count:0 } } ren原创 2020-11-09 14:18:00 · 52 阅读 · 0 评论