![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
codingWeb
知行合一
展开
-
react独特的事件机制(react-events)
react事件机制独特在哪里?function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> );}当我们在组件上设置事件处理器时,React内.原创 2020-08-19 18:17:31 · 1462 阅读 · 0 评论 -
react中setState()是异步的还是同步的,如何控制?
上上篇博客我讲了setState() 的批处理合并,而setState()是异步的还是同步的,和setState() 的批处理有很大的关系,推荐先看完上上篇博客再来看这篇,会清晰很多地址如下:setState()批处理,合并策略,控制批处理----batchUpdatessetState()是异步的还是同步的?先看异步的情况:import React, { Component } from 'react';class com2 extends Component { state =原创 2020-08-16 16:36:48 · 4589 阅读 · 1 评论 -
React-hooks的useEffect模拟componentDidUpdate生命周期
先回忆一下:class组件中的componentDidUpdate生命周期是初次渲染完后,当接收的props,state改变时或者this.forceUpdate()就会调用函数组件中的useEffect可以看做 componentDidMount,componentDidUpdate和componentWillUnmount 这三个函数的组合useEffect( ()=>{ } )只有第一个参数的时候此时相当于componentDidMount + componentDidUpdat原创 2020-08-15 18:14:59 · 10548 阅读 · 6 评论 -
setState()批处理,合并策略,控制批处理----batchUpdates
之前一直在做vue开发,可能对vue了解的多一些,也期待vue3的发展,但是近期想开始整明白react背后的事情react开发对setState的使用可能一点也不陌生,但肯定会碰到过这种情况import React from 'react'export default class BatchedDemo extends React.Component { state = { number: 0, } handleClick = () => {原创 2020-08-15 16:25:04 · 2742 阅读 · 4 评论 -
react16知识点总结,试图一篇搞定react16
接触react有段时间了,有需求就做一次总结吧,为同学,为友人,也为同行,更为大环境,如有错误还望指出当然,这只是react16的基本使用,里面没说react-hook,和redux,因为说这两个庞然大物又是一篇长文章了react16知识点目录:react的基本概念:jsx的理解:Render函数:react列表渲染,遍历数组:组件化开发:受控组件和非受控组件:推荐使用受控组件Props数据传递:父传子,子传父props验证和默认值:state状态原创 2020-07-24 23:46:08 · 307 阅读 · 0 评论 -
react-HOOK---一篇搞定react-hook,既生react,何生hook,深挖hook中常用的四个API
Hook:Hook是react 16.7新增的一个特性,主要是用来让无状态组件(函数式组件)可以使用状态,以前为了进行状态管理,需要使用类组件或者redux等来管理,相当于类组件中的state,只不过用useState去代替了useState():useState 是来定义一个状态的,它与类组件的状态不同,函数组件的状态可以是对象也可以是基础类型数据,useState返回的是一个数组,第一个是当前的状态值,第二个是对象,表明用于更改状态的函数(类似于setState)import Re原创 2020-07-02 20:49:28 · 1032 阅读 · 2 评论 -
react的生命周期理解和流程
react生命周期的理解:组件对象从创建到死亡它会经历特定的生命周期阶段React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作生命周期流程图:生命周期详述:1) 组件的三个生命周期状态: Mount:插入真实 DOM Update:被重新渲染 Unmount:被移出真实 DOM2) React 为每个状态都提供了勾子(hook)函数 componentWill原创 2020-05-11 17:37:12 · 249 阅读 · 1 评论 -
react脚手架创建项目报错
create-react-app xxx 创建项目报错解决方法:主要是由于之前可能有npm的项目,缓存没有清理干净,导致冲突。先使用npm cache clear --force进行缓存清理,再创建项目。原创 2020-05-09 16:50:12 · 657 阅读 · 0 评论