![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
酒慰风尘
这个作者很懒,什么都没留下…
展开
-
每天一点面试题(16) ---------React 渲染过程
1.程序假设有如下 jsxclass Form extends React.Component { constructor() { super(); } render() { return ( <form> <input type="text"/> </form> ); ...原创 2020-04-09 21:13:08 · 240 阅读 · 0 评论 -
每天一点面试题(16)--------虚拟DOM
JSX的背后这个过程一般在前端会称为“转译”,但其实“汇编”将是一个更精确的术语。React开发人员敦促你在编写组件时使用一种称为JSX的语法,混合了HTML和JavaScript。但浏览器对JSX及其语法毫无头绪,浏览器只能理解纯碎的JavaScript,所以JSX必须转换成JavaScript。这里是一个div的JSX代码,它有一个class name和一些内容:<div clas...原创 2020-04-09 00:38:15 · 1521 阅读 · 0 评论 -
React如何先加载接口再render
在很多需求中 父组件要调用好几个接口传入子组件 这时候要注意都是异步调用还是同步调用1.如果只调用一个的情况下在state存一个loding的默认值(布尔类型)然后在dispatch中的回调函数callback中去改变state的loding,然后在render中判断loding 是否return2.如果多个接口如果一个子组件需要调用2个或以上的接口 有两种情况要考虑:这个组件是要在...原创 2020-03-20 16:04:29 · 4181 阅读 · 0 评论 -
react中componentWillReceiveProps()在props不改变的时候也可能被调用
该方法总是在各种没有改变props的情况下被调用,需要在方法里手动判断一下this.props和nextProps是否相同,不相同了才执行我的更新方法。官方的文档https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html下面先看一下com...原创 2020-03-05 17:26:18 · 1127 阅读 · 0 评论 -
React 实现高度简洁的 Form 组件
为什么要造轮子在 React 中使用表单有个明显的痛点,就是需要维护大量的value和onChange,比如一个简单的登录框:class App extends React.Component { constructor(props) { super(props); this.state = { username: "", password: ""...原创 2020-02-12 14:26:42 · 317 阅读 · 0 评论 -
单页面路由的基本原理
1. Hash1.1 相关 ApiHash 方法是在路由中带有一个 #,主要原理是通过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件,然后通过获取 location.hash 得到当前的路径标识符,再进行一些路由跳转的操作,参见 MDNlocation.href:返回完整的 URLlocation.hash:返回 URL 的锚部分location.pa...原创 2020-02-08 19:25:56 · 470 阅读 · 0 评论 -
什么是同构渲染
首先写一个React 16的 remderToNodeStream方法的使用。// An highlighted blockvar foo = 'bar';import express from 'experss';import React from 'react';import { renderToNodeStream } from 'react-dom/server';import ...原创 2020-01-19 19:26:30 · 581 阅读 · 0 评论 -
引用类型的方法对比 在redux中
一.数组操作增加一项使用push的方法会改变原数组的值let a = [1, 2, 3];a.push(4);console.log(a) //[1, 2, 3, 4]若不想改变原数组, 可以考虑concat方法,他不会对原有数组进行改动,而创建一个新数组let a = [1, 2, 3];let b = a.cancat([4]);console.log(a) /...原创 2020-01-07 14:06:24 · 117 阅读 · 0 评论 -
EsLink的规范
EsLink 介绍EsLint帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性。EsLint是建立在Esprima(ECMAScript解析架构)的基础上的。Esprima支持ES5.1,本身也是用ECMAScript编写的,用于多用途分析。...原创 2019-12-30 19:53:52 · 4298 阅读 · 1 评论 -
每天一点面试题(14) ------------Redux-saga
5 weppack7 用到的中间键8 trunk9 react16之前版本和16之后版本原创 2019-12-23 20:28:23 · 849 阅读 · 0 评论 -
React JSX语法与组件
JSX基础介绍先看看一个最简单的例子:const element = <h1>Hello, world!</h1>;上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JSX描述一个UI是什么样子的,就好像HTML告诉浏览器我们看到的页面是什么样子。最开始接触JS...转载 2019-12-19 19:13:10 · 119 阅读 · 0 评论 -
16.7生命周期
挂载当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:constructor()static getDerivedStateFromProps()render()componentDidMount()更新当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:static getDerivedStateFromProps()sho...原创 2019-12-18 00:12:15 · 135 阅读 · 0 评论 -
ReactDOM的三个基本方法
我们在使用react开发网页时,会下载两个包,一个是react,一个是react-dom,其中react包是react的核心代码,react-dom则是React剥离出的涉及DOM操作的部分。react的核心思想是虚拟DOM,react包含了生成虚拟DOM的函数react.createElement,及Component类。当我们自己封装组件时,就需要继承Component类,才能使用生命周期函...原创 2019-12-16 18:51:08 · 635 阅读 · 0 评论 -
React 如何正常渲染一段HTML字符串
dangerouslySetInnerHTMl 属性很多时候我们做一个项目接口会返回一段 HTML 字符串文本,然后我们把它解析渲染成正常的html,这是在项目中常见不能再常见的情况了,可是在 react 里边就有一个小小的插曲,在这里分享给同学们;由于react 项目中是 JSX 语法,JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染,本人就遇到了这样的问题,(还是渲染这段...原创 2019-12-16 11:02:26 · 1362 阅读 · 0 评论 -
每天一点面试题(13)------redux-trunk
react和jq一起用有什么问题由于react 每次调用render时dom结构都会被重新绘制,因为jQuery是方便操作的DOM的库,当jQuery和REACT同时对DOM进行操作时jQuery会出现各种问题,如果实际情况需要操作DOM ,那么在shouldComponentUpdate函数中返回false如果外部的DOM不是React组建的,那么React没法去管理。第一,思想不一样。...原创 2019-12-15 23:50:38 · 548 阅读 · 0 评论 -
Redux(3) -------bindActionCreators()用法讲解
bindActionCreatorsbindActionCreators(actionCreators, dispatch)把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 action creator 包围起来,这样可以直接调用它们。一般情况下你可以直接在 Store 实例上调用 dispatch。如果你在 React 中使用 Redux...原创 2019-12-12 00:55:43 · 329 阅读 · 0 评论 -
Redux 小demo
reducer(state,action):当前的state和action,返回新的state;store:存放state的对象;state:唯一的state值,通过store.getState()获取;Action:普通对象,用来表示即将改变state。action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作;Dispatch(action):往store发送acti...原创 2019-12-11 23:17:29 · 100 阅读 · 0 评论 -
每天一点面试题(11) --------setstate
3 react和jq一起用有什么问题4 redux5 weppack6 在map中key的作用7 用到的中间键8 trunk9 react16之前版本和16之后版本原创 2019-12-10 00:16:56 · 610 阅读 · 0 评论 -
React Hook
什么是 Hook ?官方介绍:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。React 中内置的 Hook API基础 HookuseState// 传入初始值,作为 stateconst [state, setState] = useState(initialState)// `惰性初...原创 2019-12-03 23:51:36 · 167 阅读 · 0 评论 -
每天一点面试题(8) ------------diff算法详解
diff算法的作用计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面。传统diff算法通过循环递归对节点进行依次对比,算法复杂度达到 O(n^3) ,n是树的节点数,这个有多可怕呢?——如果要展示1000个节点,得执行上亿次比较。。即便是CPU快能执行30亿条命令,也很难在一秒内计算出差异。React的diff算法(1)什么是调和?将...原创 2019-12-02 21:57:07 · 3189 阅读 · 0 评论 -
每天一点面试题(7) --------react组件传参
父子组件 (父–>子)在父组件中:import React from 'react'import ChildCom from './childCom.js'class ParentCom extends React.Component { render() { return ( <div> <h1>父组件</h1> ...原创 2019-12-01 21:11:06 · 212 阅读 · 0 评论 -
Redux(1)源码解析
预备知识先提出个疑问:我们为什么需要状态管理?对于SPA应用来说,前端所需要管理的状态越来越多,需要查询、更新、传递的状态也越来越多,如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程,在多组合组件通信或客户端与服务端有较多交互过程中,我们往往需要去更新、维护并监听每一个组件的状态,在这种情况下,如果有一种可以对状态...原创 2019-11-24 01:55:17 · 159 阅读 · 0 评论