随笔分类 - react hooks
摘要：Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 的情况下 使用 state 以及其他的React 特性。 React Hooks 编写形式对比： class 写法： import React, { Component } from 'react' export def
阅读全文
摘要：useState 是 react 自带的一个 hook 函数，它的作用是用来声明状态变量 ①声明： const [ count , setCount ] = useState(0); 这种方法是 ES6 语法中的数组解构。useState 这个函数接收的参数是状态的初始值，它返回一个数组，这个数组的
阅读全文
摘要：在用 Class 制作组件时，经常会用生命周期函数，来处理一些额外的事情（副作用：和函数业务主逻辑关联不大，特定时间或事件中执行的动作，比如Ajax 请求后端数据，添加登录监听和取消登录，手动修改DOM等等 ），在 React Hooks 中也需要这样类似的生命周期函数，比如在每次状态更新时执行，这
阅读全文
摘要：在用类声明 组件时，父子组件的传值是通过组件属性 props 进行的，现在使用 Function 来声明组件，已经没有了 constructor 构造函数也就没有了 props 的接收，父子组件的传值就成了一个问题，React Hooks 准备了 useContext ，它可以帮助我们跨域组件层级直
阅读全文
摘要：JavaScript 中拿到Reducer： 不仅仅存在 Redux 中，可以使用 JavaScript 来完成Reducer 操作。reducer 其实就是一个函数，这个函数接收两个参数，一个是状态，一个用来控制业务逻辑的判断参数（state和 action ） useReducer ，它也是Re
阅读全文
摘要：useContext：可以访问全局状态，避免一层层的传递状态，这符合 Redux 的一项规则，就是状态全局化，并能统一管理。 useReducer：通过 action 的传递，更新复杂逻辑的状态，主要是可以实现类似 Redux 中的 Reducer 部分，实现业务逻辑的可行性。 第一步，使用 use
阅读全文
摘要：useMemo 主要用来解决使用 React Hooks 产生的无用渲染的性能问题，function 的形式声明组件，失去了 shouldComponentUpdate（在组件更新之前）这个生命周期，也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且，在函数组件中，也不再区分 mount
阅读全文
摘要：useRef 虽然用的不多，但是也不能缺少，它有两个主要的作用： ① 用 useRef 获取 React JSX 中的 DOM 元素，获取后就可以控制DOM 的任何东西了，但是一般不建议这么做，React 界面的变化可以通过状态来控制。 import React,{useRef} from 'rea
阅读全文
摘要：自定义Hooks 函数 和 用Hooks 创建组件很相似，跟我们平时用 JavaScript 写函数几乎一模一样，可能就是多了些 React Hooks 的特性，自定义 Hooks 函数偏向于功能，而组件偏向于界面和业务逻辑。 自定义Hooks 函数获取窗口大小 import React,{useS
阅读全文
浙公网安备 33010602011771号