React 核心概念重点笔记

前言

把之前阅读React官方文档，重点笔记做一下归纳。以及会提及到React和Vue的共同点和核心概念差异。
提示：此篇文章纯属作者的一个学习笔记，对其他人可能没有实际上的学习帮助，只是为了作者自己日后翻看能快速回顾之前学习时的思想碰撞点。

React重点笔记归纳

安装

react支持多种接入方式：

1. 在网站中按需添加React部分功能，基于老项目渐进式适配。
2. 使用前端工程化CLI脚本创建功能完整，且能支撑起大型项目React应用。
3. CDN链接引入，支持开发版本和生产版本。

核心概念

1. React的起点函数 ReactDOM.render()，也能理解是终点函数。
2. React认为渲染逻辑本质上与其他UI逻辑内在耦合，所以不采取人为的分离方式，而是放在“组件”的松散耦合单元之中来实现关注点分离。
3. JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定
4. 明确子元素和组件的区别：元素是构成 React 应用的最小砖块，组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
5. React 会将以小写字母开头的组件视为原生 DOM 标签元素，所以所有组件都以大写开头。
6. React组件中的数据流是’单向’的数据流，并且是自上而下的。
7. State作为局部状态只能通过setState()函数更新，并且setState更新时异步的，可能会合并同时的多个更新。
8. 在React的事件函数中不能通过返回false来阻止默认行为，需要显示的使用preventDefault
9. class的函数默认不会绑定JSX回调函数中的this,如果你忘记使用this.去绑定函数，当调用这个函数的时候，函数里面的this为undefined
10. 与运算符 &&判断渲染逻辑时，React只会忽略false, 如果是0不会跳过，不会渲染逻辑&&后面的组件，会直接渲染0
11. key 会传递信息给 React ，但不会传递给你的组件
12. 表单受控组件的value使 React 的 state 成为“唯一数据源”，value可以传入数组以支持在 select 标签中选择多个选项。
13. 为了不打破局部状态自上而下的单向流规则，React建议将共享状态提升到最近的共同父组件中去。
14. 如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们

高级指引

1. 代码分割import()语法，代码分割并懒加载 React.lazy(), 利用父级组件的fallback属性做优雅降级（如 loading 指示器等）
2. Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。请谨慎使用，因为这会使得组件的复用性变差。
3. 一个处理错误的优雅方式 Error Boundaries，try / catch 很棒但它仅能用于命令式代码
4. 错误边界无法捕获事件处理器内部的错误，如果你需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch
5. 高阶组件（HOC）它是一种基于 React 的组合特性而形成的设计模式, 高阶组件是参数为组件，返回值为新组件的函数。
6. Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案，适合弹窗等脱离父节点的组件。
7. Profiler 测量渲染一个 React 应用多久渲染一次以及渲染一次的“代价”
8. 避免使用 refs 来做任何可以通过声明式实现来完成的事情，勿过度使用 Refs
9. React强烈建议不要创建自己的组件基类。 在 React 组件中，代码重用的主要方式是组合而不是继承.

API Reference

React

• React.Component：定义 React 组件的基类
• React.PureComponent：与React.Component相似，但是他并未实现shouldComponentUpdate() 某些情况下可提高性能
• React.memo()：React 组件也可以被定义为可被包装的函数的高阶组件
• React.createElement()：创建React元素，一般来说如果你使用了JSX就不再需要调用
• React.createFactory()：创建React元素，返回用于生成指定类型React 元素的函数
• React.cloneElement()：以element元素为样板克隆并返回新的React元素
• React.createFactory()：返回用于生成指定类型 React 元素的函数
• React.isValidElement()：验证对象是否为 React 元素
• React.Children：提供了用于处理this.props.children不透明数据结构的实用方法 .map .forEach .count .only .toArray
• React.Fragment：在不额外创建DOM元素的情况下，让render()方法中返回多个元素
• React.createRef：创建一个能够通过 ref 属性附加到 React 元素的 ref
• React.forwardRef：创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中
• React.lazy：import一个动态懒加载的组件
• React.Suspense：指定加载指示器，以防其组件树中的某些子组件尚未具备渲染条件

ReactDOM

• ReactDOM.render()：在提供的 container 里渲染一个 React 元素，并返回对该组件的引用
• ReactDOM.hydrate()：用于在 ReactDOMServer 渲染的容器中对 HTML 的内容进行 hydrate 操作
• ReactDOM.unmountComponentAtNode()：从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除
• ReactDOM.findDOMNode()：如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素
• ReactDOM.createPortal()：创建 portal。Portal 将提供一种将子节点渲染到 DOM 节点中的方式

ReactDOMServer

ReactDOMServer 对象允许你将组件渲染成静态标记。通常，它被使用在 Node 服务端上

• ReactDOMServer.renderToString()：将 React 元素渲染为初始 HTML。React 将返回一个 HTML 字符串
• ReactDOMServer.renderToStaticMarkup()：此方法与renderToString相似，但它不会在React内部创建的额外DOM属性，如果你需要的是静态页面生成器那它非常适合。
• ReactDOMServer.renderToNodeStream()：将一个 React 元素渲染成其初始 HTM。这个 API 仅允许在服务端使用。不允许在浏览器使用。
• ReactDOMServer.renderToStaticNodeStream()：此方法与 renderToNodeStream 相似，但此方法不会在 React 内部创建的额外 DOM 属性，例如 data-reactroot。如果你希望把 React 当作静态页面生成器来使用，此 API 仅限于服务端使用

DOM 元素

• React 与 HTML 之间有很多属性存在差异，具体参考文档
• 在 React 16 中，任何标准的或自定义的 DOM 属性都是完全支持的。具体参考All Supported HTML Attributes

合成事件

SyntheticEvent 实例将被传递给你的事件处理函数，它是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()

React 通过将事件 normalize 以让他们在不同浏览器中拥有一致的属性，支持的事件

JavaScript 环境要求

React 16 依赖集合类型 Map 和 Set 。如果你要支持无法原生提供这些能力（例如 IE < 11）或实现不规范（例如 IE 11）的旧浏览器与设备，考虑在你的应用库中包含一个全局的 polyfill ，例如 core-js。React 16 跟Vue-cli v3 浏览器兼容性一样使用 core-js 支持老版本浏览器

HOOK

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

• HOOK没有破坏性改动，完全可选，100%向后兼容
• 虽然HOOK可以解决组件开发很多似曾相识的问题，但是React采用渐进策略：没有计划从 React 中移除 class
• 使用useState和useEffect可以体验到HOOK的奇妙，可以参考这两个思路去自定义自己的HOOK,反正HOOK能根据你的使用情况明显的放大价值
• Hook API 索引参考文档

Vue和React的共同点

1. 都是虚拟doc，虚拟doc的性能开销都很小，通过虚拟doc计算完再去操作具体对应的真实doc。
2. 循环列表都需要给子节点指定key，不然会报警告。
3. 都支持路由懒加载，Webpack分割代码块。
4. 都支持SSR，并都有各自的服务端渲染框架 Vue(Nuxt), React(Next)
5. React 和 Vue运行时性能都是非常快
6. Vue 和 React 都提供了强大的路由来应对大型应用

Vue和React的核心概念差异

1. vue局部状态支持双向绑定，React局部状态是’单向’的数据流，并且是自上而下的。
2. Vue局部状态支持直接=’value’等于号赋值更新状态，React必须通过setState()函数（有点类似Vuex的mutations）
3. Vue模板语法更贴合像Html, React的jsx语法更贴合js，并且vue也支持让你选择jsx的语法来编写组件。
4. 条件渲染的差别: Vue直接在模板中v-if(更直观), React还是真正的通过js语法if来判断接收组件变量插入到对应位置（更具逻辑性）
5. Vue子组件需要声明props有哪些属性，React不需要，除了特殊的key关键属性不能在子组件props中获取。
6. 在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。
7. React Native原生渲染生态比Vue好