![](https://img-blog.csdnimg.cn/20190918140158853.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react专题
文章平均质量分 96
react基础到高阶
麦乐乐
这个作者很懒,什么都没留下…
展开
-
setState异步、同步与进阶
如何使用setState在 React 日常的使用中,一个很重要的点就是,不要直接去修改 state。例如:this.state.count = 1是无法触发 React 去更新视图的。因为React的机制规定,一个state的更新,首先需要调用 setState 方法。this.setState({ count: 1})复制代码这样便能触发重新渲染。稍有经验的开发者会知道,setState 方法其实是 “异步” 的。即立马执行之后,是无法直接获取到最新的 state 的,需...原创 2020-11-30 21:31:20 · 105 阅读 · 0 评论 -
react源码分析——自己实现异步setState
众所周知,很多人都知道react的this.setState()异步的,并且只能通过这个函数来改变状态。但是,都是知其然,不知其所以然。其实不是不能通过this.state来改变状态,只是这样的改变并 不会引起组件的更新,因为react不像vue那样监听属性的改变来更新视图,而是通过this.setState()函数的调用来更新视图,前面我们写了一个简单的实现。import { rend...原创 2019-12-31 09:59:14 · 275 阅读 · 1 评论 -
react源码分析——自己实现diff算法
在前面我们实现了_render方法,就是把虚拟dom转换为真实的dom,下面我们需要优化一下这个方法,不要让它傻乎乎的渲染整个dom树,对比需要变化的地方,只渲染需要变化的地方,这样的过程,就是diff算法。对比当前真实的dom跟虚拟的dom,一边对比一边更新。只对比同一级的dom。主要是拿真实的dom跟虚拟的dom对比。我们之前的_render方法,就没有那么好用了,现在我们来实现一下d...原创 2019-12-27 14:35:01 · 456 阅读 · 0 评论 -
react源码分析——自己实现生命周期
这里我们来看一下,传递给render方法的第一个参数是类的情况import React from './react'import ReactDOM from './react-dom'class Home extends Component { constructor(props) { super(props); this.state = {...原创 2019-12-26 18:17:32 · 247 阅读 · 0 评论 -
react源码分析——自己实现render方法
上一章提到我们要自己写一个react。那么我们先来分析一个,这个react是怎样的。import React from 'react';import ReactDOM from 'react-dom';import './index.css';import * as serviceWorker from './serviceWorker';const ele = ( <...原创 2019-12-26 15:10:01 · 622 阅读 · 0 评论 -
react源码分析——环境搭建
先来初始化一个react项目看一下。npm install create-react-app -gcreate-react-app react-testcd react-testnpm installnpm run start我们先创建一个react项目,然后运行起来。你会看到一个这样的页面。修改src下面的index.jsimport React from...原创 2019-12-25 11:27:15 · 327 阅读 · 0 评论 -
React 的 PureComponent Vs Component
一.它们几乎完全相同,但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate,某些情况下可以用PureComponent提升性能1.所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做...转载 2019-10-11 15:26:11 · 86 阅读 · 0 评论 -
react 生命周期 虚拟DOM原理
1 react生命周期componentWillMount:在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染。render根据组件的props和state(无两者的重传递和重赋值,论值是否有变化,都可以引起组件重新render) ,return 一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根...原创 2019-09-24 21:09:05 · 576 阅读 · 0 评论 -
react-animate 动画
https://github.com/daneden/animate.cssreact-springtnpm install animate.css --savehttps://www.react-spring.io/docs/hooks/basics原创 2019-09-23 11:22:38 · 740 阅读 · 0 评论 -
redux源码分析
store.jsimport { applyMiddleware, compose, createStore } from 'redux'import rootReducer from '../reducers'const middlewares = []if (process.env.NODE_ENV === 'development') { const { logger...原创 2019-09-09 19:48:45 · 201 阅读 · 0 评论 -
react+TypeScript+mobx+sass+antd项目实践
react中使用typescript创建项目create-react-app react-ts --scripts-version=react-scripts-ts输入y,不要点回车,成功后的项目目录如下:node_modules直接装好了,cd react-ts npm run start项目跑起来。tsconfig.json包含了工程里TypeScript特定的选项,是T...原创 2019-09-08 11:34:06 · 1922 阅读 · 0 评论 -
React Hooks的使用
一个简单的例子import React, { Component,useEffect, useState } from 'react'const App = (props) => { let [ num, setDate ] = useState(0) return ( <div> <button onCl...原创 2019-09-08 09:46:22 · 155 阅读 · 0 评论 -
react高阶组件的用法
具体而言,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件我们需要一个抽象,允许我们在一个地方定义逻辑,并在许多组件之间共享它。这正是高阶组件擅长的地方。优点:HOC 不会修改传入的组件,也不会使用继承来复制其行为。相反,HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数,没有副作用。属性代理:高阶组件通过被包裹的React组件来操作props开...原创 2019-09-05 11:52:11 · 738 阅读 · 0 评论 -
react换一种方式写 loading组件
import ReactDOM from 'react-dom'import React from 'react'class Loading extends React.Component { render () { return ( <div>加载中....</div> ) }}const node = nullconst...原创 2019-08-28 10:20:23 · 600 阅读 · 0 评论 -
浏览器中安装React Developer Tools
https://github.com/facebook/react-devtools/tree/v3.3.2进入github地址,下载下来 进入项目根目录可以在这里选择版本npm install然后执行package.json里面的打包命令根据不要同的浏览器,选择不同的命令npm runbuild:extension:chrome把这个文件夹拖入到chrom...原创 2019-08-27 20:10:34 · 286 阅读 · 0 评论 -
react-router5.0
8 路由项目使用react-router的最近版本5.0,看npm时你会发现一句话This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application tha...原创 2019-06-05 09:49:23 · 2039 阅读 · 0 评论 -
react搭建项目流程 react-router5.0
1 项目搭建npm install -g create-react-appcreate-react-app react-mobilecd react-mobilenpm install从上面的项目目录可以看到,没有webpack配置文件,这是因为这个文件被隐藏了起来,如果想控制webpack配置文件,可以执行npm eject命令,目录下面就会出现config文...原创 2019-05-29 16:10:54 · 1188 阅读 · 0 评论