![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react hooks
守护砂之国泰裤辣
既然已经走这么远了,那么不妨再走远一点...
展开
-
React hooks学习笔记(7)——useCallback&useMemo
useCallback:在组件中定义事件回调或者是某些函数处理时选择使用useMemo(memory记忆):根据已有状态计算某些数据并且计算过程较消耗性能时选择使用下面直接demo演示,还是components下新建一个CallbackMemoDemo.js并在App.js中将其引入:import React from 'react';export default function CallbackMemoDemo() { return <div> Ca原创 2020-11-14 00:08:58 · 238 阅读 · 0 评论 -
React hooks学习笔记(6)——useRef
ref是reference的缩写,译为引用。直接看demo,还是老样子创建一个RefDemo.jsimport React from 'react';export default function RefDemo() { return ( <div> refDemo </div> );},并在App.js中将其引入:...import RefDemo from "./components/原创 2020-11-13 23:16:25 · 238 阅读 · 0 评论 -
React hooks学习笔记(5)——自定义hooks
直接看demo,在components下新建HooksDemo.js:import React from 'react';const MOCK_DATA = [ { name: "zhangsan", age: 18 }, { name: "lisi", age: 10 }];export default function HooksDemo() { return ( <原创 2020-11-13 22:40:28 · 469 阅读 · 0 评论 -
React hooks学习笔记(4)——useContext
useContext,直译为使用上下文,作用是深层值传递,直接看例子:components下新建一个ContextDemo.js(父子关系:ContextDemo > Demo > Child):import React from "react";const Demo = props => { return <div> <Child /> </div>}const Child = () => ..原创 2020-11-11 21:51:13 · 299 阅读 · 0 评论 -
React hooks学习笔记(3)——useReducer
useReducer是redux的hooks用法,直接通过demo演示。components目录下新建ReducerDemo.js:import React, { } from 'react';export default function ReducerDemo(props) { return ( <div> reducer</div> );}在App.js中引入:...import ReducerDemo from "./c.原创 2020-11-11 20:41:30 · 203 阅读 · 0 评论 -
React hooks学习笔记(2)——useEffect
effect中文译为效果、影响。而useEffect在React中一般用于一个组件中的某个或某些个state或props发生改变时,组件所要产生的变化或者响应。通俗来说就是监听组件的一个或多个变量(state或者父组件传来的变量),当变量改变时,useEffect里的语句便会执行。 在前面代码的基础上,现在有个需求,就是每当count为偶数时,就在控制台打印一下: 1.类组件ClassComp.js修改为:import React, { Component } from '...原创 2020-10-27 00:02:18 · 728 阅读 · 1 评论 -
React hooks学习笔记(1)——useState
函数式组件是当前React主流写法,最近在项目里一直遇到,今天结合B站的教程记录一下自己的学习体会。 1. 直接就demo来讲吧,首先初始化react项目(好像得用yarn初始化了)create-react-app react-hooks-action 完事之后在package.json里看下react版本,确保大于16.82. 把一些不重要的文件删掉,src下创建一个components目录并在此目录下创建两个文件,一个用于展示传统的类组件ClassComp.js,...原创 2020-10-24 17:58:20 · 285 阅读 · 0 评论