前端扫雷复习计划—React：基础部分总结1

火宝特工
172 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

该系列文章，是本人在系统复习前端相关知识时，对学习内容提炼、思考、总结的记录。 本人现有知识水平有限，如存在片面和错误的地方，请留言批评指正。

本文思考总结三个方面的知识点：

一、为什么用React，React的优势

二、React的语法基础--JSX语法

三、React组件的三大属性

一、为什么用React，React的优势

Ⅰ、结构更加清晰

React采用模块化和组件化的编程思想, 使页面的组织更加清晰

模块: 向外提供特定功能的js程序,一般就是一个js文件

组件: 用来实现局部功能效果的代码和资源的集合(html/css/js/img等等)

Ⅱ、更加高效

模块化和组件化

一方面: 模块化和组件化, 提高了代码的复用率, 简化项目编码, 提高运行效率

虚拟DOM和Diffing算法

另一方面:

React使用虚拟(virtual)DOM,不总是直接操作页面真实DOM

且React的中的DOM Diffing算法,可以实现最小化页面重绘

注意：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效减少渲染次数

二、React的语法基础--JSX语法

Ⅰ、JSX定义

JSX定义：

  • JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法
  • 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用

Ⅱ、JSX本质解析

本质：jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖，所有的jsx最终都会被转换成React.createElement的函数调用。

createElement函数需要传递三个参数, 而jsx的语法规则，其实是与这些规则对应的

  • 参数一：type
  • 参数二：config
  • 参数三：children

Ⅲ、JSX语法规则

1、语法规则

  1. 定义虚拟DOM时,不要写引号

  2. 标签中混入JS表达式时要用{}

  3. 样式的类名指定不要用class,要用className

  4. 内联样式,要用style={{key:value}}的形式(双{{}}代表对象,单{}代表表达式)去写

    {{ color: 'white' }} --- value需要加引号,否则会默认去查找某个变量

    {{ fontSize: '29px' }} --- key需要按照小驼峰的形式书写

  5. 只有一个根标签(整个虚拟DOM在外层有且仅有一个容器包裹)

  6. 标签必须闭合 --- <input type="text" />

  7. 标签首字母

    若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错

    若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错


<style>
.title {
background-color: orange;
width: 200px;
}
</style>
​
<!-- 准备好一个“容器” -->
<div id="test"></div>

const myId = 'aTgUigu'
const myData = "HelLo,rEacT"
​
//1.创建虚拟DOM
const VDOM = (
<div>
<h2 className="title" id={myId.toLocaleLowerCase()}>
    <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLocaleLowerCase()}</span>
</h2>
        
<h2 className="title" id={myId.toLocaleUpperCase()}>
    <span style={{ color: 'white', fontSize: '29px' }}>{myData.toLocaleLowerCase()}</span>
</h2>
        
<input type="text" />
        
<good>无对应html标签,会报错</good>
        
<Good>无对应组件,会报错</Good>
</div>
)
​
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))

2、区分【js语句(代码)】与【js表达式】

表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方

下面这些都是表达式

  1. a
  2. a+b
  3. demo(1)
  4. arr.map()
  5. function test(){}

语句:不能放在创建虚拟dom语句中

  1. if(){}
  2. for(){}
  3. switch(){case:xxxx}

三、React组件的三大属性

Ⅰ、三大属性职能理解

React的核心作用是管理页面的交互变化——DOM操作

DOM操作的过程中，需要以下要素：

  • 变化对象：哪个元素需要发生变化 ---- ref标识
  • 需要做哪些变化：将元素变化的各自信息存储在总站中 ---- state状态管理
  • 怎么做到变化的：将信息变化的具体操作放在自定义的方法中，并传递给操作者 ---- props传递数据

Ⅱ、三大属性使用

1、组件三大属性1 — state

① 理解
  1. state是组件对象最重要的属性,值是对象(可以包含多个key:value的组合)
  2. 组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)
② 注意

  1. 组件中的render方法中的this为组件实例对象

  2. 组件自定义方法中this为undefined,如何解决?

    a) 强制绑定this:通过函数对象的bind()

    b) 箭头函数推荐

  3. 状态数据,不能直接修改或者更新

2、组件三大属性2 — props

① 理解
  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props中
② 作用
  1. 通过标签属性从组件外向组件内传递变化的数据
  2. 注意:组件内部不要修改props数据

3、组件三大属性3 — refs

① 理解

组件内的标签可以定义ref来标识自己

② ref的几种形式:
a、字符串形式的ref(不推荐,将被淘汰)

字符串形式的ref存在效率问题，不推荐使用

b、回调形式的ref

ref={c => this.input1=c}

相当于将ref当前所处的节点直接挂在了实例自身（this）上，并且取了个名字为input1

对于回调函数形式的ref，React将会自动调用该回调函数，并将ref所处的当前节点作为参数传入回调函数

c、createRef创建ref容器 -- 最推荐的

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的 --- 只能给一个节点用

avatar
文章
阅读
粉丝