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语法规则
    
  
  
    
...

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 状态
  • constructorrender 、自定义方法的调用次数
 

简化版:

 

组件实例核心属性 props

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

props 是只读的,不能修改。

props 基本使用

 

批量传递 props

 

限制 传递的props

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

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




 

props 的简写形式

Person.propTypesPerson.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)
  • 由于是箭头函数,因此 thisrender 函数里的 this ,即组件实例
 

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

TIP

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

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

你可能感兴趣的:(react.js,javascript,前端)