![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 61
react小记
Nassua
这个作者很懒,什么都没留下…
展开
-
useCallback
1、使用场景function App () { const [data, setData] = useState(null) function getData () { setTimeout(() => { setVal({ name: 'nassua' }) }, 500) } useEffect(() => { getData() }, []) return ( <div>{val}</div&转载 2021-06-11 14:17:33 · 878 阅读 · 1 评论 -
useEffect
1、最基本使用首先,举一个简单的例子:import React, { useState } from 'react';function App() { const [data, setData] = useState({ hits: [] }); return ( <ul> {data.hits.map(item => ( <li key={item.objectID}> <a href={i转载 2021-06-09 20:18:36 · 215 阅读 · 0 评论 -
useState
const [state, setState] = useState(initialState)返回一个 state,以及更新 state 的函数。在初始渲染期间,返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。...原创 2021-06-09 14:44:25 · 1669 阅读 · 0 评论 -
react 中 context 的理解
1、为什么要使用 context没有 context 这个概念之前,我们在组件中自上而下传递数据是通过 props 属性来实现的;如果层级不多用 props 还好,但是如果层级多了,并且只是最后一层会用到,那我们是不是每一层都得写一个 props,这样的话代码写起来很繁琐,不够优雅,不容易维护;所以context 的出现可以解决这个问题。context 提供了一个无需为每层组件手动添加 props,就能在组件之间进行数据传递的方法。2、怎么使用 contextReact.createConte.转载 2021-04-29 16:25:56 · 429 阅读 · 0 评论 -
react 中事件处理的三种方法,以及为什么事件处理需要绑定 this
1、事件处理的三种方法(1)在回调函数中使用箭头函数:onClick={ () => this.fn() }缺点:在每次 render 时候,都会产生一个匿名函数。如果此组件作为一个子组件,那么父组件 render 的时候,子组件也可能会重新渲染,消耗性能。(2)在构造器 constructor 中绑定 this:this.fn = this.fn.bind(this)缺点:每次都要手动绑定 this。(3)使用类字段语法:fn = () => { }缺点:ES7功能原创 2021-04-28 14:00:07 · 540 阅读 · 0 评论 -
react 中的 super(props) 作用
1、constructor()这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法。并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法。2、super()在class方法中,继承是使用 extends 关键字来实现的。子类必须在 constructor( ) 调用 super() 方法,否则新建实例时会报错。报错的原因是:子类是没有自己的 this 对象的,它只能继承自父类的 this 对象,然后对其进行加工,而 super()..转载 2021-04-28 11:05:14 · 3498 阅读 · 0 评论