ReactJS

[yaofly2012]

一直忙于搬砖，忽然觉得对Reactjs即属性，又陌生。从第一次写Reactjs相关的笔记到现在也过去几年了

Slogan

1. Declarative【声明式】

React makes it painless to create interactive UIs.
擅长处理可交互的页面。

2. Component-Based【基于组件的，组件化】

• 封装->组件
• 组合->组件

3. Learn Once, Write Anywhere【学习一次，到处使用】

途径

官方文档Docs, Blog

官方文档路线

教程

快速入门的使用教程

文档

详细说明文档

1. 核心概念
2. 高级指引

• 高级概念
  • Portal
• 性能优化
  • 代码分割
  • Profiler
• 编码质量
  • 严格模式
  • 静态类型检查
  • 使用 PropTypes 类型检查

API文档

Controlled Component

React组件的状态是自己维护的，一般是在JS环境中调用setState方法更新的，但是对于表单元素他有自己的状态，数据的更改可能来自用户的输入。为保证状态的一致性，需要实现表单数据“双向绑定”。

1. React实现起来确实麻烦，Vue通过指令帮我们做了。

[yaofly2012]

Component

React里一切都是组件，它利用组件来构建UI的，并且使用嵌套组件方式构建复杂的UI。

UI = F(props)

1. 分类

• 函数组件（简单组件）
  没有state，也没有生命周期函数，没有实例对象。也叫无状态（stateless）组件
• 类组件
  必须存在render方法

2. 组件的输入（props）

All React components must act like pure functions with respect to their props.

和元素的props有啥关系？

3. state

1. class组件为啥必须继承React.Component（它干了什么事）？

组件实例

Function components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.

注意：

1. 任何组件的return返回值必须只能有单一根元素

2. controlled components
   没有state的组件

3. function component
   a simpler way to write components, a function that takes props as input and returns what should be rendered。
   特殊的controlled components

[yaofly2012]

Why Immutability Is Important

不懂

1. 保留state副本

[yaofly2012]

JSX

1. JSX哲学

React embraces the fact that rendering logic is inherently coupled with other UI logic

1. 将UI的渲染逻辑和其他UI逻辑（事件绑定，数据绑定）放在一起。
2. 模板时代我们都是把JS逻辑和模板字符串分别放在不同的文件里，JS逻辑引用模板字符串，然后将逻辑产生的数据对象+模板输出最终的HTML字符串。而React则完全抛弃了模板字符串方式，转而完全使用JS写UI，但是JS擅长写UI逻辑，不擅长表达UI的结构，所以引入JSX语法糖来表达UI的结构。
3. UI的逻辑全部用JS实现了，VueJS则还保留着模板的方式（PK）
4. JSX就是模拟HTML的行为。

2. What

HTML式的JS表达式 ---Babel---> 一般JS表达式 ---React---> HTML

1. 像写HTML的方式写JS程序，更直观的用JS表达UI结构。
2. 本质是个JS表达式（是React.createElement方法调用表达式的语法糖），一般用括号包裹着（防止ASI），其执行上下文就是其定义的地方的执行上下文。

function h() {
  var name = 'john';
  function clickHandle(e) {
  	return console.log('click handle')
  }  
	return <h1 onClick={clicHandle}>{name}</h1>
}

本质上就是：

function h() {
  var name = "john";
  function clickHandle(e) {
    return console.log("click handle");
  }
  return React.createElement("h1", { onClick: clicHandle }, name);
}

JSX中的表达式涉及的变量引用都来自其定义的上下文环境（跟模板字符串不一样的）。

Issues ?

1. JSX里可以写语句吗？
   当然是不可以的，JSX本质上是个表达式，所以JSX里也只能写表达式（即表达式内嵌套表达式）。

条件，循环

再次强调下，ReactJS的UI渲染逻辑和结构都是JS实现的，所以对于渲染逻辑（条件，循环）也都是一般的JS语法，不像VueJS有模板指令实现的。

1. 可能是文档Demo过于简单也可能是一直熟悉模板类条件渲染的习惯，当实际写ReactJS条件渲染时忽然发现不会写了,
   根据clientId控制显示元素：

 render() {
        var clientId = this.state.clientId;
        return (
        <div> {
            !!clientId ? 
            <Typography>
                <Paragraph copyable>{ clientId }</Paragraph>
            </Typography> 
            : <p>好像出错了，点击<Button onClick={this.refreshHandle} >刷新</Button>试试~</p>
            }
        </div>)
    }

注意：

1. JSX expressions must have one parent element
   不管是render函数整个返回值，还是花括号内的任意JSX表达式的值都必须只能有一个根节点；

2. JSX花括号内 只可以是JS表达式，不能直接写语句（如if语句）。

深入jsx

本质就是React.createElement的语法糖。

三大块

1. 标签

命名约定（要求）：元素必须是小写，自定义React组件必须大驼峰
并且React在JSX转化时会默认把小写对标签组件视为内置组件转换（即标签名字转成字符串），大驼峰标签会视为对变量的引用：

• 使用时上下文必须要存在变量，变量的值可以是string, function, class。
• 还可以使用点访问变量的属性标签

var Tag = 'h2';
var element = <Tag>a</Tag>; // 变量引用 element.type='h2'

2. 属性

1. HTML的属性值只可以是字符串，而JSX的属性值可以是任意类型是JS数据；
2. HTML的属性名字是不区分大小写的，但是JSX的属性名字是区分大小写的；
3. bool类型的数据处理同HTML。

3. 子元素

子元素：组件起始和结束标签内的所有元素都是该标签的子元素，组件的children属性可以访问组件的子元素。

哪些元素可以作为子元素

虽然prop.children属性可以是任意类型的数据，但并不是每种类型都可以作为JSX的子元素直接渲染。
先想想HTML可以直接渲染啥？字符串，标签。那JSX也类似：

1. 字符串（对应HTML处理字符串）；
   JSX处理字符串的方式同HTML。也可以处理HTML Entity格式的字符串（JS是不认HTML Entity的）
2. 组件（对应HTML标签）；
3. JS表达式；

• 表达式的值是1或者2或者由1，2构成的数组时可以直接被渲染;
  甚至可以是多维数组也是可以的，最终会扁平化显示。
• 布尔类型、Null 以及 Undefined 将会忽略
  是为了更方便处理业务逻辑。
• Number
  也可以直接被渲染
• 对象
  对象不可以作为React子元素
• 表达式的值是函数？
  函数是不可以直接被渲染的，可以通过其他方式利用函数props属性（如 render props技术）。

[yaofly2012]

元素

关于元素的描述

1. React Components, Elements, and Instances

It’s just an immutable description object with two fields: type: (string | ReactClass) and props: Object

An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.

For a React component, props are the input, and an element tree is the output

一、基础

HTML DOM是HTML标签字符串在内存的表现，DOM对象确实很臃肿。React使用更轻量的对象（元素）描述HTML标签。但注意：

both child and parent elements are just descriptions and not the actual instances

语法

{
    type: <string | function | class>
    props: {
    }
}

1. 元素的类型可以是任意值是（string | function | class）的表达式。

小结

1. 元素是React APP最终展示的内容（即HTML），是构建React UI的最小组成单位，虽然Reactjs是基于组件的，但是组件是由元素构成的。
2. 元素就是React DOM，就是虚拟DOM；
3. 元素本质上是个对象，用于描述UI展示内容的描述对象。

二、创建元素

2.1 创建元素的方式有几种：

1. 使用方法React.createElement
2. JSX
   元素描述嵌套结构不够直观，使用JSX创建元素更直观的描述元素结构

2.2 元素对象

var element = React.createElement('p', {}, 'hello React Element');
Object.isFrozen(element) // true
Object.isSealed(element) // true
Object.isExtensible(element) // false

• 就是个纯对象，相对于HTML DOM Element对象确实轻量了很多
• 并且是不可修改对象

1. $$typeof属性:
   每个React元素都有个这个标签属性，用于标识这个对象是React元素。
   Use a Symbol to tag every ReactElement

2. key属性:

2.3 元素列表和key属性

A “key” is a special string attribute you need to include when creating lists of elements

1. 列表的每个元素为啥需要key标识自己和兄弟元素的区别？
   跟ReactJS渲染机制有关？用来标识元素？

Keys help React identify which items have changed, are added, or are removed

不懂？？？

数组索引作为key的问题

1. 索引本质上只是代表元素的位置，并不能唯一标识数据 。
   如果数组只发生排序，插入，删除元素操作，也会导致全部渲染。浪费了
2. 规则1并不是绝对的，如果索引也能唯一区分数据（数组只会尾部增加，不发生排序，插入，删除操作），那也是可以使用索引作为Key的

key不能做什么

1. key是React内部使用的，并不会作为组件的属性（props），也不会被渲染到DOM里，组件也无法通过属性获取。

三、PK组件

the building blocks of React apps: elements and components.

元素是组件的产出，也可以说元素用于描述组件。

看了这个文章React 深入系列1：React 中的元素、组件、实例和节点 有所感悟：

1. 元素是UI最总展示的内容，元素没有业务逻辑，就是UI的描述对象；
2. 组件则是包含业务逻辑的，控制如何生成元素（即控制如何生成UI）；
3. 组件只能生成一个元素（可嵌套子元素）节点，往大的讲整个ReactApp也只有一个根元素。
4. 组件是函数或者类，而元素是个对象。
5. 组件具有业务逻辑，控制如何生成元素。

四、Issues

1. 怎么理解元素是immutable对象，而React只会更新变化的部分？

It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort

不是很懂！

2. 为啥组件不能多个根元素？

元素本质是个对象，如果存在多个根元素，就无法确定多个根元素之间的关系（就像页面里有多个HTML标签一样）。同样的JSX或者JSX内嵌的表达式的值都必须只能有一个根元素。

vDOM的好处

React虚拟DOM的好处
Virtual Dom 的优势在哪里？

待阅读？？？

参考1的参考

参考

1. React Components, Elements, and Instances

[yaofly2012]

其他s

纯粹极简的react状态管理组件unstated

前端模板的原理与实现

网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

React ref 的前世今生

【第1530期】React Fiber架构

---

Redux
RxJS
Mobx

[yaofly2012]

组件的组合 VS 继承

忽然在想"组件化"的目的是什么？
最大目标是提升代码复用率，进而提升开发效率和代码质量。
然如何提升组件的复用率呢？组合还是继承方式？两种方式都是提升复用率的，但复用组件该使用哪种方式呢？

props + 组合

1. 对比Vue的slot，感觉slot是模板的产物；
2. ReactJs里一切都是JS，props可以是任意类型值。

[yaofly2012]

React 理念(多读)

1. React 理念