xiaofeng123aazz的博客

当Facebook第一次发布 React 时，他们还引入了一种新的 JS 方言JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。

纯组件会对组件输入数据进行浅层比较，如果当前输入数据和上次输入数据相同，组件不会重新渲染比较引用数据类型在内存中的引用地址是否相同，比较基本数据类型的值是否相同。person . name } 丨 {name : "张三" , job : "developer" });} , 1000);} , [ ]);

一 引沿Fiber 架构是React16中引入的新概念，目的就是解决大型 React 应用卡顿，React在遍历更新每一个节点的时候都不是用的真实DOM，都是采用虚拟DOM，所以可以理解成fiber就是React的虚拟DOM，更新Fiber的过程叫做调和，每一个fiber都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime，来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动权交给浏览器去渲染，做一些动画，重排（ reflow ），重绘 repa

react 生命周期初始化阶段：getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render:组件在这里生成虚拟的 DOM 节点componentDidMount:组件真正在被装载之后运行中状态：componentWillReceiveProps:组件将要接收到属性的时候调用shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回

当Facebook第一次发布 React 时，他们还引入了一种新的 JS 方言JSX，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用Babel和webpack等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。

根据官方提供的 useXXX API 结合自己的业务场景，可以使用自定义开发需要的 custom hooks，从而抽离业务开发数据，按需引入；实现业务数据与视图数据的充分解耦。

React-intl提供了两种使用方法，一种是引用React组件，另一种是直接调取API，官方更加推荐在React项目中使用前者，只有在无法使用React组件的地方，才应该调用框架提供的API。setState 并不是单纯同步/异步的，它的表现会因调用场景的不同而不同。React基于Virtual DOM实现了一个SyntheticEvent层（合成事件层），定义的事件处理器会接收到一个合成事件对象的实例，它符合W3C标准，且与原生的浏览器事件拥有同样的接口，支持冒泡机制，所有的事件都自动绑定在最外层上。

近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别，以及 v6 一些新特性。而在原有项目还是使用老版本 react router 的情况下，不太建议急着直接升级，可能存在较多的改动。全部换成Route 新特性变更render和component改为element，且支持嵌套路由path支持相对路径；简化path格式，只支持两种动态占位符。

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取render() {render() {() => this . context . changeColor('green') } > 绿色 < / button > < button onClick = {

Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。

关键词：react react-scheduler scheduler 时间切片 任务调度 workLoop。

Fiber是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。

基础类型就没什么好说的了，以下都是比较常用的，一般比较好理解，也没什么问题。// 联合类型 }Hooks的美妙之处不只有减小代码行的功效，重点在于能够做到逻辑与 UI 分离。做纯粹的逻辑层复用。例子：当你自定义 Hooks 时，返回的数组中的元素是确定的类型，而不是联合类型。可以使用 const-assertions。// 推断出 [boolean, typeof load]，而不是联合类型 (boolean | typeof load)[] }也可以断言成tuple type。

返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。

React 的大多数东西和 JavaScript 几乎是一样的。React 的 props 也只是 JavaScript 中的对象，这也就意味着我们可以在对象中传递许多不同的值，而组件很难知道它们。这样组件在使用 props 时就变得比较麻烦。很多人喜欢这么访问 props。在不使用 TypeScript 或者不定义 propsTypes 的情况下，我们可以随意使用 props.xxx 的方式来访问 props。

通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM，一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间，也就是JS层面，相比于更多的DOM操作它的消费是极其便宜的。

一个JSX语法的示例，如下所示< / h1 >;这种语法形式，既不是HTML，也不是字符串，而是称之为JSX，是React里用来描述UI和样式的语法，JSX最终会被编译为合法的JS语句调用（编译器在遇到时采用JS语法进行解析，遇到就采用HTML规则进行解析）;render() {} }这种方式比起函数定义方式则更加灵活。

当然，这不是设置 React 组件样式的最佳方法，但在条件样式中，使用它非常方便。组件，使用了类似 HTML 的样式，但它既不是 HTML，也不是 JS，甚至不是 React。第一个字母是大写字母，这是一个规定，因为我们在处理混合的 HTML 元素和 React 元素时，JSX 编译器（如 Babel ）会将所有以小写字母开头的名称视为 HTML 元素。的组件将继续成为 React 的一部分，但作为 React 开发人员，我认为开始使用函数（和 Hook ），并专注于学习新 API 是有意义的。

自定义Hook的本质是一种函数代码逻辑的抽取。自定义组件必须以use开头，否则会报错。下面的这个自定义Hook就是对组件的挂载和卸载中重复的逻辑进行复用。return(< div > < h1 > 这是测试自定义Hook < / h1 > < / div >) } function useInfo(name) {console . log(` ${ name } 组件被挂载了~ `);console . log(` ${ name } 组件被卸载了~ `);};} , [ ]);}${

相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和API。