React笔记

最新推荐文章于 2023-04-26 10:57:18 发布

HbShan

最新推荐文章于 2023-04-26 10:57:18 发布

阅读量95

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/HbShan/article/details/111482595

版权

函数组件和类区别

  this === und
  没有 setState
  没有 生命周期

setState 同步的还是异步的

异步:
1. JSX 原生事件
2. 生命周期
同步:
1. 原生 js 注册的事件
2. ajax
3. setTimeout setInterval 计时器

生命周期

16.4 前

加载阶段
  constructor
  render
  componentDidMount

更新阶段
  componentWillReceiveProps
  shouldComponentUpdate
  componentWillUpdate
  render
  componentDidUpdate

卸载阶段
  componentWillUnmount

16.4 后

hook

pages 目录: 业务组件

目录名小写

componets: 公共组件
目录名大写
jsx 结尾
index.jsx

Redux 三大基本原则:

store 单一数据源
state 在页面里是只读的触发action -> 修改state
state 只能在reduce里改并且reduce 必须是纯函数

浏览器渲染html的过程

https://www.cnblogs.com/whalesea/p/10980849.html
解析html
构建dom树
dom树结合css文件，构建呈现树
布局
绘制

解析html和构建dom树是同步进行的，这个过程就是逐行解析代码，包括html标签和js动态生成的标签，最终生成dom树。
构建呈现树，就是把css文件和style标签的中的内容，结合dom树的模型，构建一个呈现树，写到内存，等待进一步生成界面。呈现树一定依赖dom树，呈现节点一定会有对应的dom节点，但是dom节点不一定会有对应的呈现节点，比如，被隐藏的一个div。
布局，这一步就是结合呈现树，把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上，会有对元素大小、位置的定义，但是浏览器还需要根据实际窗口大小进行计算，比如对auto的处理。
绘制，把css中有关颜色的设置，背景、字体颜色等呈现出来。

调用 setState 发生了一些什么

在代码中调用setState函数之后, 
React 会将传入的参数对象与组件当前的状态合并,
然后触发所谓的协调(Reconciliation), 
经过协调 React 会以相对高效的方式根据新的状态构建 
React 元素树. 在 React 得到元素树之后, 
React 会自动计算出新的树与老树的节点差异, 
然后根据差异对界面进行最小化重渲染

react和vue区别

react 上手比较难 vue 相对简单
react 插件库更丰富
react 没有双向绑定的 vue 有 v-Models
react diff vue2.0 defaultProps 实现 (vue3.0 Proxy)

react 和 vue 的相似之处

使用虚拟 dom
提供了响应式和组件化的视图组件

内核

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

箭头函数定义

箭头函数没有自己的 this
箭头函数的 this 是在定义时就固定不变的 this值是当前上下文的 this

箭头函数普通函数区别
* 箭头没有自己的 this
* 箭头没有 arguments
* 箭头函数不能当做构造器使用
* 箭头函数的 this 是在定义时就固定不变的 this 值是当前上下文的 this

Promise

 * 为啥要用 promise: 回调地狱
 * 三种状态: 进行中 已成功(resolve) 已失败(reject)
 * new Promise((resolve, reject) => { }) 返回一个 promise
   (Promise 的状态一旦改变了 就永远不会再变了)
    resolve(参数): 把 promise 的状态 由进行中 -> 已成功
    reject(参数): 把 promise 的状态 由进行中 -> 已失败
 * 监听 
    then(res => { res })
    catch(error => { error })
    p1.then() 返回一个新的 promise
    p1.catch() 返回一个新的 promise

 * Promise.all([p1, p2, ...p3]) 返回一个 promise
    必须都成功触发 then
    有一个失败 就触发 catch


 * Promise.race([p1, p2, ...p3])
    只要有一个 状态改变了 不管成功还是失败 都会触发监听

 * Promise.resolve(参数) 立刻返回一个状态是成功的 promise
 
 * Promise.reject(参数) 立刻返回一个状态是失败的 promise
*/