【React进阶之路】读后总结 —— React基础

这篇文章是我对书中的总结，很多基础知识没有写，想系统学习的小伙伴还是建议买一本书来看~

目录

 

1.JSX语法

2.组建的概念及使用

3.列表渲染

4.事件处理

---

1.JSX语法

JSX是用于描述UI的JavaScript扩展语法。

React 通过组件的概念，将页面进行拆分并实现组件复用。React认为，一个组件应该是具备UI的念书和UI数据的完整体，不应该将他们分开处理。于是有了JSX。这样在组件内部可以使用类似HTML的标签描述组件的UI，让UI结构更清晰，又因为JSX本质上仍然是JavaScript，所以可以使用更多JavaScript语法，构建更复杂的UI结构。

标签类型

当使用DOM标签时，标签的首字母必须小写，当使用React组件类型的标签时，首字母必须大写。React正是通过判断首字母大小写，判断渲染的是DOM类型的标签还是React类型的标签。

JavaScript表达式

在JSX中使用JavaScript表达式需要将表达式用大括号{}括起来。不能使用多行JavaScript语句。

 

JSX并不是必须的，他只是React.createElement的语法糖，蛋使用它创建界面元素更加清晰简洁，在项目使用中应该首选JSX语法。

---

2.组建的概念及使用

组件是React的核心概念，组件将应用的UI拆分成独立的、可复用的模块。定义组件有两种方式，使用class组件和使用函数组件。

使用class定义组件要满足两个条件：

组件的props

 组件的props用于把父组件中的数据或方法传递给子组件，供其使用。

props是一个简单结构的对象，它包含的属性正是由组件作为JSX标签使用时的属性组成。

组件的state

组件的state是组件内部的状态。他的变化最终反映到组件的UI变化上。在组件的构造方法中，通过this.state定义组件的初始状态，通过调用this.setState方法改变组件的状态，进而UI也会随之重新渲染。

在组件的构造方法中，首先要调用super（props），这一 步实际上是调用了React.Component这个class的constructor方法，用来完成React组件的初始化工作。

 

React组件正是由props和state两种类型的数据驱动渲染出组件UI。 组件通过props接收外部传入的数据、方法，state反应组件内部状态的变化。

有状态组件和无状态组件

如果一个组件内部状态是不变的，就用不到state，这样的组件称之为无状态组件。 反之，一个组件内部状态发生变化，主要是用state保存变化，就称为有状态组件。

在使用无状态组件时，应尽量将其定义为函数组件。开发应用时，应尽可能多的使用无状态组件。无状态组件不用关心状态变化，更容易被复用。

React应用组件设计的一般思路是，通过定义少数有状态组件管理整个应用的状态变化，并且将状态通过props传递给其余的无状态组件，由无状态组件完成页面绝大部分UI渲染工作。总之，有状态组件主要关注处理状态变化的业务逻辑，无状态组件主要关注组件UI的渲染。

属性校验和默认属性

PropTypes包含组件属性所有可能的类型。 如果属性是组件的必须属性，就需要在PropTypes的类型属性上调用isRequired。

默认属性：defaultProps。

组件样式

引入方式有两种，一种是在使用组件的HTML页面中通过标签引入，（一般作用于转增个应用的所有组件）一种是把样式表文件当做一个模块，在使用该样式表的组件中，像导入其他组件一样导入样式表文件。（作用于某个组件）

内联样式 使用{{}}，第一个大括号表示style的值就是JavaScript表达式，第二个大括号表示JavaScript表达式是一个对象。 样式的属性名必须使用驼峰命名格式。

组件和元素

React组件是一个class或函数，他接受一些属性作为输入，返回一个React元素

1. class继承自React.Component
2. class内部必须定义render方法，render方法返回代表该组件UI的React元素

---

3.列表渲染

React使用Key属性来标记列表中的每个袁术。当列表数据发生变化时，React可以通过key知道哪些元素发生了变化，从而只渲染发生变化的元素，提高渲染效率。

虽然列表元素key不能重复，但这个唯一性仅限于当前列表中。

---

4.事件处理

事件命名要采用驼峰命名方式。

事件处理函数的写法主要有三种方式：

使用箭头函数：其this指向的是函数定义时的对象。最大的问题是，每次render调用时，都会重新创建一个新的事件处理函数，带来额外的性能开销。

使用组件方法：每次render不会重新创建一个回调函数，没有额外性能损失，但在构造函数中，为事件处理函数绑定this，比较繁琐。

属性初始化方法：ES7的property initializers会自动为class中定义的方法绑定this，也不需要担心巨剑重复渲染导致的函数重复创建问题。