190322&React 的核心概念有哪些

React 的核心概念有哪些

说说对 react 的理解，核心概念有哪些。

• Diff 算法
• 组件
• JSX
• Props & State
• 组件 API
• 组件类型
• 高阶组件
• 生命周期

Diff 算法

React 通过 updateDepth 对 Virtual Dom 树 进行层级控制，只会对相同颜色方框内的 DOM 节点进行比较，即同一个父节点下的所有子节点。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较

• React 的 Diff 算法

组件

编写的所有 React 代码基本上就是一个包含许多小组件在内的大组件。
React 组件：能够像原生的 HTML 标签一样输出特定的界面元素，并且也能包括一些元素相关逻辑功能的代码

• 详解 React 的组件

JSX

React 的一种特定语法扩展，可以将 HTML 和 JS 代码全都写在一起。
按照传统来说，代码应尽可能的分离，HTML 和 JS 代码分开才是。

• React 的 JSX

Props & State

React 的属性被称为 Props(properties 的缩写)
作用是：可以让组件之间通过 Props 进行交互。
当然了，也正因为如此，React 当中的数据流是单向的：数据只能从父组件传向子组件，反过来则不行。
这就尴尬了，组件只能从父组件传向子组件吗？非也，state 就是解决这个问题的。

• React 的 Props & State

组件 API

还记得上几个概念中提到的 render 和 setState 方法吗？它们都包含在 React 组件 API 方法之中。还有一个比较有用的方法 constructor。
除了这 3 个方法之外，React 还提供了一些按照特定次序触发的生命周期函数等。

• React 的组件 API

组件类型

函数式组件写法更简单，但是没有 state,不能使用 setState 方法，也被称作是无状态组件。
不同组件类型也就延伸除了组件角色的概念。容器组件和展示组件。分别处理不同的业务逻辑。
区分处理 UI 和数据逻辑的组件是一种很好的开发实践。

• React 的组件类型

高阶组件

高阶组件(Higher-order components 通常缩写为 HOCS)
可以理解为一个工厂方法。
高阶组件函数可以传入一个组件并为其赋予更多功能。

• React 的高阶组件

生命周期

具体分为四种情况：

• 1.当首次装载组件时，按顺序执行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount；

• 2.当卸载组件时，执行 componentWillUnmount

• 3.当重新装载组件时，此时按顺序执行 getInitialState、componentWillMount、render 和 componentDidMount，但并不执行 getDefaultProps.

• 4.当再次渲染组件时，组件接收到更新状态，此时按顺序执行 componentWillReceiveProps、- shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。

• React 的 生命周期

参考

掌握这 5 大核心概念，你就理解了 React
React 框架精髓
React 面试必会–React 的 Diff 算法