React 全家桶含自定义hook的方法

React 入门

React 简介

React 为何物

React：用于构建用户界面的 JavaScript 库。由 Facebook 开发且开源。

为何学习 React

原生 JavaScript 的痛点：

• 操作 DOM 繁琐、效率低
• 使用 JavaScript 直接操作 DOM，浏览器进行大量重绘重排
• 原生 JavaScript 没有组件化编码方案，代码复用率低

React 的特点：

• 采用组件化模式、声明式编码，提高开发效率和组件复用率
• 在 React Native 中可用 React 语法进行移动端开发
• 使用虚拟 DOM 和 Diffing 算法，减少与真实 DOM 的交互

React 初体验

来一发 Hello React

相关 JS 库：

• react.development.js ：React 核心库
• react-dom.development.js ：提供 DOM 操作的 React 扩展库
• babel.min.js ：解析 JSX 语法，转换为 JS 代码

创建虚拟 DOM 的两种方式：JS 和 JSX

• 使用 JS 创建虚拟 DOM 比 JSX 繁琐
• JSX 可以让程序员更加简单地创建虚拟 DOM，相当于语法糖
• 最终 babel 会把 JSX 语法转换为 JS

JS创建

JSX创建（最终babel转为js）

虚拟 DOM && 真实 DOM

关于虚拟 DOM：

1. 本质是 Object 类型的对象（一般对象）
2. 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。
3. 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

JSX

JSX 简介

• 全称：JavaScript XML

• React 定义的类似于 XML 的 JS 扩展语法；本质是 React.createElement() 方法的语法糖

  XML :

  
  George
  John
  Reminder
  Don't forget the meeting!
   
  

• 作用：简化创建虚拟 DOM

==JSX 语法规则==

• 定义虚拟 DOM 时，不要写引号
• 标签中混入 _JS 表达式_需要使用 {}
• 指定类名不用 class，使用 className
• 内联样式，使用 style={ { key: value } } 的形式
• 只能有一个根标签
• 标签必须闭合，单标签结尾必须添加 /：
• 标签首字母小写，则把标签转换为 HTML 对应的标签，若没有，则报错
• 标签首字母大写，则渲染对应组件，若没有定义组件，则报错

  
    
    
    
  
  
    

    ...
    
  
 

JSX 例子

注意区分：JS 语句(代码) 与 JS 表达式：

1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

a
a + b
demo(1)
arr.map()
function test() {} 

​ 2. 语句(代码)：

if(){}
for(){}
switch(){case:xxxx} 

3.循环遍历数组

React 面向组件编程

函数式组件

要点：

• 组件名称首字母必须大写，否则会解析成普通标签导致报错，详见 JSX 语法规则
• 函数需返回一个虚拟 DOM
• 渲染组件时需要使用标签形式，同时标签必须闭合

渲染组件的过程：

• React 解析标签，寻找对应组件
• 发现组件是函数式组件，则调用函数，将返回的虚拟 DOM 转换为真实 DOM ，并渲染到页面中

类式组件

组件渲染过程：

• React 解析组件标签，寻找组件
• 发现是类式组件，则 new 该类的实例对象，通过实例调用原型上的 render 方法
• 将 render 返回的虚拟 DOM 转为真实 DOM ，渲染到页面上

三大组件实例核心属性 --state

state 是组件实例对象最重要的属性，值为对象。又称为状态机，通过更新组件的 state 来更新对应的页面显示。

要点：

• 初始化 state
• React 中事件绑定
• this 指向问题
• setState 修改 state 状态
• constructor 、render 、自定义方法的调用次数

简化版：

组件实例核心属性 props

每个组件对象都有 props 属性，组件标签的属性都保存在 props 中。

props 是只读的，不能修改。

props 基本使用

批量传递 props

限制 传递的props

在 React 15.5 以前，React 身上有一个 PropTypes 属性可直接使用，即 name: React.PropTypes.string.isRequired ，没有把 PropTypes 单独封装为一个模块。

从 React 15.5 开始，把 PropTypes 单独封装为一个模块，需要额外导入使用。

props 的简写形式

Person.propTypes 和 Person.defaultProps 可以看作在类身上添加属性，利用 static 关键词就能在类内部进行声明。因此所谓简写只是从类外部移到类内部。

类式组件的构造器与 props

官网文档说明(opens new window)

构造函数一般用在两种情况：

• 通过给 this.state 赋值对象来初始化内部 state
• 为事件处理函数绑定实例

constructor(props) {
  super(props)
  // 初始化 state
  this.state = { isHot: true, wind: '微风' }
  // 解决 this 指向问题
  this.changeWeather = this.changeWeather.bind(this)
} 

因此构造器一般都不需要写。如果要在构造器内使用 this.props 才声明构造器，并且需要在最开始调用 super(props) ：

否则this.props 就会变为undefined ，不过一般也可以调用props

constructor(props) {
  super(props)
  console.log(this.props)
} 

函数式组件使用 props

由于函数可以传递参数，因此函数式组件可以使用 props 。

组件实例核心属性 refs

通过定义 ref 属性可以给标签添加标识。即获取该节点

字符串形式的 ref

这种形式已过时，效率不高，官方 (opens new window)不建议使用。

回调形式的 ref

要点：

• c => this.input1 = c 就是给组件实例添加 input1 属性，值为节点(currentNode)
• 由于是箭头函数，因此 this 是 render 函数里的 this ，即组件实例

关于回调 ref 执行次数的问题，官网 (opens new window)描述：

TIP

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

即内联函数形式，在更新过程重新调