![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react-hooks知识梳理
文章平均质量分 59
jiaojsun
做一只快乐的小码龙
展开
-
react-hooks知识梳理—6.useReducer, useContext
1.useReducerredux有一个单一的store,首先使用一个例子感受一下import React, { useReducer } from 'react';const reducer = (state, action) => { switch(action.type) { case 'ADD': return state + 1; case 'SUB': return state - 1; default: return state; }}原创 2021-02-21 23:07:04 · 212 阅读 · 0 评论 -
react-hooks知识梳理—5.自定义hooks
1.实现一个demo如下demo,先坚听到浏览器的尺寸变化。import React, { useState, useEffect } from 'react';const Parent = () => { const [width, setWidth] = useState('0px'); const [height, setHeight] = useState('0px'); useEffect(() => { setWidth(document.doc原创 2021-02-21 22:39:15 · 142 阅读 · 0 评论 -
react-hooks知识梳理—4.memo,useMemo,useCallback
1.useMemo,useCallBack作用用来做优化,在类组件中,只要父组件进行一个更新,子组件也会进行一个更新。不管子组件应不应该去更新,所以我们需要优化。优化的办法是shouldUpdate这个钩子,父子组件前后传过来的参数进行优化和判断。2.memo看下面代码,父组件每次更新的时候,子组件都会相应的去更新。import React, { useState } from 'react';const Child = () => { // const date = ne原创 2021-02-21 21:33:01 · 223 阅读 · 0 评论 -
react-hooks知识梳理—3.useRef
1.回忆useEffect的问题————————————————————————————————————————————————想实现一个定时器的效果,每0.5s count加1import React, { useState, useEffect } from 'react'; const Fetch = () => { const [count, setCount] = useState(0); useEffect(() => { setInterval原创 2021-02-21 00:01:21 · 249 阅读 · 0 评论 -
react-hooks知识梳理—2.useEffect
1.useEffect副作用操作useEffect可以进行一个副作用的操作,比如请求数据,看下面的代码import React, { useState, useEffect } from 'react';const Fetch = () => { const [result, setResult] = useState(null); useEffect(() => { fetch('./index.html').then(res => res.text())原创 2021-02-20 21:58:19 · 685 阅读 · 2 评论 -
react-hooks知识梳理—1.useState
1.函数组件和类组件函数组件:被动的接受props,不能有自己的状态,也不能有自己的生命周期,类组件复用的问题,只要函数里面有this,这个函数就不纯类组件:使用setState,有生命周期 缺点: 类组件的复用很麻烦,其他组件要用的话,必须使用高阶组件包一层,这样封装的成本很大, 而且中间层的存在只是为了传递数据,没有其他任何意义,render props复用的方式,复用起来不是很优雅。facebook非常推崇函数式编程利用hooks实现副作用(副作用:比如...原创 2021-02-20 20:59:40 · 198 阅读 · 0 评论