![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
react相关内容
leelxp
前端码农,算法差。。。
展开
-
react解密:react中key的作用是什么?
我们知道,不管是在vue还是react中,当循环列表的时候,往往会写一个key,那么这个key起到了什么作用呢?其实,key是react用来追踪哪些列表的元素被修改,被添加或者是被删除的辅助标示。在开发过程中我们需要保证某个元素的key在其同级元素中具有唯一性。在react的diff算法中react会借助元素的key来判断该元素是最新创建的还是被移动而来的,从而减少不必要的元素渲染。除此之外,react还要根据key来判断元素与本地状态的关联关系。注意点:key的值一定要和具体的元素一一对应原创 2020-10-15 16:11:32 · 680 阅读 · 0 评论 -
React解密:React实际项目开发中可以做哪些优化?
我们知道,项目优化,是开发中的重中之重,一般会分为几个阶段:开发过程中,上线之后的首屏,运行中的状态。而上线之后的首屏和运行中的优化最为多:首先会涉及到几个指标,FP(页面在导航后首次呈现出不同于导航前内容的时间点)、FCP(首次绘制任何文本,图像,非空白canvas或SVG的时间点)、FMP(首次绘制任何文本,图像,非空白canvas或SVG的时间点),要有一个良好的体验是尽可能的把FCP提前,需要做一些工程化的处理。去优化资源的加载。 方式及分包策略:资源的减少是最有效的加快首屏打开的方式。 .原创 2020-08-26 18:43:43 · 541 阅读 · 0 评论 -
React解密:React中setState的运行原理是什么
我们知道react中更新state的时候,会调用setState方法。那么调用setState方法为什么就能更新组件的state呢,其原理又是什么呢?下面我们就来讲讲setState的原理:setState()将对组件 state 的更改排入队列批量推迟更新,并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步,只是代码执行顺序不同,有了异步的感觉。setState(stateChange | updater [, callback]).原创 2020-08-26 15:22:33 · 1166 阅读 · 0 评论 -
React解密:React中PureComponent和Component的区别是什么
提到PureComponent,应该并不是react与生俱来就有的,而应该是在15.3版本之后才出现的,主要是为了取代之前的PureRenderMixin。所以对于几年不怎么接触react的我来说,当提到PureComponent的时候,还是有那么些许的懵逼。更不要说它于Component的区别是什么?那么我们先来看看pureComponent是个什么鬼?PureComponent其实就是一个继承自Component的子类,会自动加载shouldComponentUpdate函数。当组件需要更新的时候,原创 2020-08-25 17:42:44 · 6423 阅读 · 1 评论 -
React解密:props和state的区别是什么
开发react组件,我们最常用到的俩个引起组件渲染的可能就是state和props了,那么他们有什么区别呢?props:props:函数组件的props就是函数的入参组件 类组件:this.props包含被该组件调用或者定义的propsstate:组件中的state包含了随时可能发生变化的数据。 state是由用户定义,是一个普通的JavaScript对象区别:props是传递给组件的(类似于函数的形参),而state是在组件内部被组件自己管理的(类似于在一个函数内声明的变量) p原创 2020-08-24 17:45:37 · 1755 阅读 · 0 评论 -
React解密:React高阶组件是什么?
React中比较高大上的东西,高阶组件应该算是一个点,开发中也许写的不多,但是我们必须要直到高阶组件是什么,高阶组件能干什么?A higher-order component is a function that takes a component and returns a new component.这是react官网给出的解释,也就是说,高阶组件就是接收一个组件,然后返回一个新组件。这是函数式编程的思想。那么高阶组件是如何实现的呢?俩种方法:属性代理和反向继承。属性代理:实质就是通过包裹原原创 2020-08-24 14:48:13 · 2710 阅读 · 0 评论 -
React解密:React事件绑定原理是什么?
React的事件绑定,是通过在react元素上添加事件属性,且事件属性名必须采用驼峰命名的方式,如onClick等。import React from 'react'const Test = () => { const handleClick = () => { console.log('点击我') } return ( <div onClick={this.handleClick.bind(this)}>点我<原创 2020-08-26 11:33:32 · 2001 阅读 · 0 评论 -
React解密:React生命周期是什么
了解react的运行机制,生命周期是一个绕不过去的话题,那么react的生命周期会经历哪些阶段呢?在我看来应该是会经历四个阶段:一、初始化阶段在我们编写类组件的时候,我们常常会有这样的代码:import React, { Component } from 'react'class App extends Component { contructor (props) { super(props) }}export default App这也是组件的初原创 2020-08-27 15:23:17 · 181 阅读 · 0 评论 -
React解密:React类组件中为什么要绑定this?
我们在开发react组件的时候,总是会在构造函数中或者是事件中去通过bind方法去绑定this。不知道你有没有思考过这是为什么呢?难道不绑定this就不可以吗?为什么react类组件中要绑定this,绑定的方式又有哪些呢?直白点来说。其实react中绑定this和react本身没有半毛钱关系。哈哈哈,意不意外?惊不惊喜?所以,既然是这样,我们就来说说this绑定的哪些事儿。默认绑定function test() { console.log(this)}test() //原创 2020-08-24 16:57:16 · 2207 阅读 · 0 评论 -
React解密:React关键核心fiber是什么
学习react,虚拟dom和diff算法是你绕不开的核心话题。我们知道,随着react新版本的发布,在虚拟dom和diff算法上还是有了很大的变化,那么我们就来diff一下新旧版本的虚拟dom和diff算法都是怎么样的,我们先来看看旧版本的虚拟dom和diff算法。我们知道react的核心思想是:内存中维护一颗虚拟DOM树,数据变化时(setState),自动更新虚拟 DOM,得到一颗新树,然后 Diff 新老虚拟 DOM 树,找到有变化的部分,得到一个 Change(Patch),将这个 Patch原创 2020-08-17 15:31:22 · 1380 阅读 · 0 评论 -
React解密:React组件通信的方式有哪些?
随着react,vue,angular,组件化思想的深化,组件通信一直以来都是开发的重要内容。那么我们就来说说react组件的通信方式有哪些?组件通信的类别:1、父子组件2、子父组件3、子孙组件4、无关组件父子组件通信:propsconst Child = (props) => { return ( <div>我的原色是:{{props.color}}</div> )}const Parent = () =>原创 2020-08-13 16:39:16 · 446 阅读 · 0 评论 -
React解密:React Hooks函数之useRef和useImperativeHandle
看到了useRef,我们就会很自然的和dom关联起来。先来看用法:const refContainer = useRef(initialValue);useRef返回一个可变的 ref 对象,其.current属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonC...原创 2020-08-06 18:47:03 · 1010 阅读 · 0 评论 -
React解密:React Hooks函数之useCallback和useMemo
之所以将useCallback和useMemo放到一起,从某种意义上说,他们都是性能优化的始作俑者,他们也有很多的共性。我们先来回顾一下class组件性能优化的点:调用setState,就会触发组件的重新渲染,无论前后state是否相同 父组件更新,子组件也会自动更新介于这俩点,我们一般使用immutable进行比较,在不相等的时候调用setState, 在shouldComponentUpdate中判断前后的props和state,如果没有变化,则返回false来阻止更新...原创 2020-08-06 17:37:35 · 1788 阅读 · 1 评论 -
React解密:React Hooks函数之useReducer
看到Reducer这个单词是不是非常的熟悉,非常的请求,没错,hooks函数,useReducer函数与redux中reducer函数如出一辙。在hooks函数中就是useState函数的替代方案。它接收一个形如(state, action) => newState的 reducer,并返回当前的 state 以及与其配套的dispatch方法。const [state, dispatch] = useReducer(reducer, initialArg, init);在某些场景下...原创 2020-08-05 17:18:14 · 945 阅读 · 0 评论 -
React解密:React Hooks函数之useContext
useContext函数是React Hooks三大基础hooks函数之一。话不多说,我们先来看用法:const value = useContext(MyContext);接收一个 context 对象(React.createContext的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的<MyContext.Provider>的valueprop 决定。当组件上层最近的<MyContext.Provider&...原创 2020-08-05 16:33:47 · 2078 阅读 · 0 评论 -
React解密:React Fiber如何让用户体验更流畅
随着react 16.8+版本的发布,react fiber也搭这react的顺风车一起发布。react fiber虽然说并不是革命性的一次更新,但是也确实比之前提升了不少,所以接下来,我们就了解一下react fiber是什么。官方说:React Fiber是对核心算法的一次重新实现。fiber是什么?讲react fiber之前,还是要先讲讲fiber是什么。react fiber和fiber其实是不一样的,fiber是另有出处。我们对计算机的进程和线程其实并不陌生。那么这个fiber又叫纤程(原创 2020-07-27 14:08:13 · 371 阅读 · 4 评论 -
React解密:React Hooks函数之useEffect和useLayoutEffect
useEffect是react hooks的又一个重要的hooks函数。Effect hooks允许你在组件中执行副作用操作。数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。所有,useEffect这个hooks函数就相当于是componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。原创 2020-08-04 10:55:52 · 1820 阅读 · 0 评论 -
React解密:React Hooks函数之useState
React16.8+版本的发布,hooks函数是新增的一大功能,其实useState函数是让函数组件有了状态,那么我们就来详细了解一下useState这个函数。用法:const [state, setState] = useState(initialState);因为react是函数式编程,所以上面的代码就很好理解了,useState函数接收一个初始化参数initialState,其返回值用数组解构俩个参数,state是初始化的state,以及更新state的函数setState.在初始渲染.原创 2020-08-03 15:17:59 · 5313 阅读 · 0 评论 -
React解密:React Hooks详情初次探索
随着React 16.8+ 版本的发布,react也迎来了重大的变革,其中react hooks更是react新版本的一大革命性的变化,也是被众多开发者所青睐。那么react hooks 到底是何方神圣,我们来揭开react hooks的神秘面纱。react hooks是什么?在react中,凡是use-开头的react api都是hooks函数。当前比较火热的函数式编程就是react的推崇的,react提倡写函数式组件。但是函数式组件不能使用生命周期函数,没有属于自己的state,这又不得不使得开原创 2020-07-23 18:09:33 · 310 阅读 · 0 评论 -
函数式编程:初识函数式编程
我们在经历了面向对象编程、面向过程编程之后,函数式编程又进入了我们的视线。其实,函数式编程并不是一个什么新鲜的东西。它早在上世纪50年代,随着 Lisp 语言的创建,就已经诞生。而近些年,随着react hooks的发布,函数式编程以其优雅,简单的特点再次出现在大众的视线中。函数式编程这种古老的编程范式并没有随着岁月而褪去其光彩,反而愈加生机勃勃。什么是函数式编程?关于函数式编程,维基百科是这样说的:函数式编程是一种编程范畴。他将电脑运算视为数学上的函数计算,并且避免使用程序状态以及易变对象。函数编原创 2020-07-21 18:34:47 · 185 阅读 · 0 评论 -
前端主流技术栈:vue和react、angular的区别是什么
前端技术发展很快,近几年出现了很多前端技术栈,但是主流技术栈,还是以react、vue、angular为主。各有各自的优势,又有自己的不同,我们就来对比一下这三大技术栈。 react vue angular 历史 由facebook团队发布并且维护当前已经更新到16.8或者更新版本,与之前版本有来较大的区别,增加了新的功能,但是开发者无感知。react被描述为是一个构建用户界面的javascript库。被一些大公司所青睐,例如:arbin等 由尤雨溪团队维护。当前vu.原创 2020-07-21 15:36:34 · 1760 阅读 · 0 评论