react hooks
学习react
qq_44753552
这个作者很懒,什么都没留下…
展开
-
八、useRef的使用
const refContainer = useRef(initialValue);useRef返回的是一个可变的ref对象,它的属性current被初始化为传入的参数(initialValue),返回的ref对象在组件的整个生命周期内保持不变。常见的一个用例:function TextInputWithFocusButton() { const inputEl = useRef(); const getValue = () => { // `current` 指向已挂载到 D原创 2020-09-03 14:45:54 · 4334 阅读 · 1 评论 -
七、useMemo与useCallback的使用
目录性能问题案例展示使用useMemo性能问题案例展示import React ,{ useState } from 'react'export default function WithMemo() { const [count, setCount] = useState(1); const [val, setValue] = useState('小明'); function add() { console.log('compute'); l原创 2020-08-31 21:01:05 · 2645 阅读 · 0 评论 -
六、useReducer的使用
目录一、Reducer是什么?二、useReducer的使用一、Reducer是什么?Reducer的兴起是从Redux广泛使用开始的,但不仅仅存在于Redux中。Reducer其实就是一个函数,这个函数接收两个参数,一个是状态(state),另一个是用来控制业务逻辑的判断参数(action)。先写一个Reducer。function countReducer(state, action) { switch(action.type) { case 'add':原创 2020-08-31 15:04:58 · 301 阅读 · 0 评论 -
五、useContext的使用
文章目录一、在计数器案例引入createContext函数二、useContext接受上下文变量一、在计数器案例引入createContext函数引入createContext函数,并使用得到一个组件,然后在return方法中使用,代码如下import React, { useState , createContext } from 'react';//===关键代码const CountContext = createContext()function App(){ const [原创 2020-08-31 14:15:01 · 899 阅读 · 0 评论 -
四、useEffect解绑副作用
文章目录useEffect解绑副作用useEffect解绑副作用我们先看一段代码function Example(){ const [ count , setCount ] = useState(0); useEffect(()=>{ console.log(`useEffect=>你点击了${count} 次`) return ()=>{ console.log('===================='原创 2020-08-31 12:05:46 · 1078 阅读 · 0 评论 -
三、useEffect的使用
文章目录一、useState简介和小案例二、useEffect的作用三、为什么在组件内部调用useEffect四、useEffect会什么时候执行一、useState简介和小案例useEffect可以让你在函数组件中执行副作用操作(副作用:和函数业务主逻辑关联不大,特定时间或事件中执行的动作,比如Ajax请求后端数据,添加登录监听或取消登录、手动修改DOM等),useEffect在每次状态(state)更新时执行,主要用来代替常用的生命周期函数。我们为计数器增加一个小功能:将document的title原创 2020-08-31 11:33:04 · 2684 阅读 · 0 评论 -
二、useState简介和多状态声明
文章目录一、useState简介二、多状态声明一、useState简介useState是React Hooks中的一个hook函数,它的作用是声明状态变量。我们用一个例子来学习一下----显示一个计数器import React, { useState } from 'react';function Example() { // 声明一个叫 “count” 的 state 变量。 const [count, setCount] = useState(0); return (原创 2020-08-27 11:37:16 · 2526 阅读 · 0 评论 -
一、React Hooks简介和编写对比
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。原创 2020-08-27 10:53:31 · 161 阅读 · 0 评论