React Hooks
文章平均质量分 51
Anita-Sun
一只热衷于分享前端知识的奶牛猫~ ️
展开
-
React Hooks 中 useRef 的介绍
useRef获取DOM元素和保存变量作用用useRef获取React JSX中的DOM元素,获取后你就可以控制DOM的任何东西了。但是一般不建议这样来作,React界面的变化可以通过状态来控制。用useRef来保存变量,这个在工作中也很少能用到,我们有了useContext这样的保存其实意义不大,但是这是学习,也要把这个特性讲一下。useRef获取DOM元素import React, { useRef} from 'react';function Example8(){ const原创 2021-06-08 17:26:14 · 417 阅读 · 0 评论 -
React Hooks 中 useMemo 的介绍
简介useMemo主要用来解决使用React hooks产生的无用渲染的性能问题使用function的形式来声明组件,失去了shouldCompnentUpdate(在组件更新之前)这个生命周期,也就是说我们没有办法通过组件更新前条件来决定组件是否更新。而且在函数组件中,也不再区分mount和update两个状态,这意味着函数组件的每一次调用都会执行内部的所有逻辑,就带来了非常大的性能损耗使用useMemo可以在第二个参数都发生变化时执行第一个参数里面的函数import React , {useSt原创 2021-06-08 17:13:38 · 423 阅读 · 0 评论 -
React Hooks 中 useReducer 的介绍
简介在JavaScript中的reducer是一个函数,接收两个参数,一个是状态,一个用来控制业务逻辑的判断参数。useReducer的使用用useReducer实现计数器的加减双向操作import React, { useReducer } from 'react';function ReducerDemo(){ const [ count , dispatch ] =useReducer((state,action)=>{ switch(action){原创 2021-06-08 13:47:22 · 123 阅读 · 1 评论 -
React Hooks 中 useContext 的介绍
useContext 让父子组件传值更简单createContext 函数创建 context创建contextconst CountContext = createContext()实现父子传值,相当于把count变量实现跨层级传递和使用了,当父组件的count变量发生变化时,子组件也会发生变化<CountContext.Provider value={count}></CountContext.Provider>完整代码import React, { useS原创 2021-06-08 13:05:33 · 116 阅读 · 0 评论 -
React Hooks 中 useEffect 的介绍
useEffect代替常用生命周期函数useEffect 实现componentDidMonut和componentDidUpdate生命周期函数第一次组件渲染和每次组件更新都会执行useEffect()类似于类中的componentDidMonut和componentDidUpdateuseEffect中定义的函数的执行不会阻碍浏览器更新视图,也就是说这些函数时异步执行的,而componentDidMonut和componentDidUpdate中的代码都是同步执行的import React,原创 2021-06-08 12:37:01 · 186 阅读 · 0 评论