React-面向组件编程 | 皈依的博客

type

status

date

slug

summary

一、组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

注意：
组件名必须是首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签 < />

渲染类组件标签的基本流程

React 内部会创建组件实例对象

调用render()得到虚拟 DOM ,并解析为真实 DOM

插入到指定的页面元素内部

1. 函数式组件

上面的代码经历了以下几步

我们调用 ReactDOM.render() 函数，并传入 <MyComponent name = "工厂函数组件"/> 作为参数。

React 调用 MyComponent 组件，并将 {name: '工厂函数组件'} 作为 props 传入。

MyComponent 组件将 工厂函数组件(简单组件/无状态) 元素作为返回值。

React DOM 将 DOM 高效地更新为 工厂函数组件(简单组件/无状态)。

2. 类式组件

这玩意底层不简单，this的指向真的需要好好学习

在优化过程中遇到的问题

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

组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决

通过 bind 改变 this 指向
推荐采用箭头函数，箭头函数的 this 指向

state 数据不能直接修改或者更新

二、组件实例三大属性

1. state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

简单的说就是组件的状态，也就是该组件所存储的数据

类式组件中的使用

点击

使用的时候通过this.state调用state里的值

在类式组件中定义state

在构造器中初始化state

在类中添加属性state来初始化

修改 state

在类式组件的函数中，直接修改state值

页面的渲染靠的是render函数

这时候会发现页面内容不会改变，原因是 React 中不建议 state不允许直接修改，而是通过类的原型对象上的方法 setState()

setState()

partialState: 需要更新的状态的部分对象

callback: 更新完状态后的回调函数

setState简写方式

方式1
方式2

2. props

与state不同，state是组件自身的状态，而props则是外部传入的数据

类式组件中使用

在使用的时候可以通过 this.props来获取值类式组件的 props:

通过在组件标签上传递值，在组件中就可以获取到所传递的值

在构造器里的props参数里可以获取到 props

可以分别设置 propTypes 和 defaultProps 两个属性来分别操作 props的规范和默认值，两者都是直接添加在类式组件的原型对象上的（所以需要添加 static）

同时可以通过...运算符来简化

3. refs

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在我们正常的操作节点时，需要采用DOM API 来查找元素，但是这样违背了 React 的理念，因此有了refs

有三种操作refs的方法，分别为：

字符串形式

回调形式

createRef形式

字符串形式refs（被官方抛弃）

回调形式的refs

组件实例的ref属性传递一个回调函数c => this.input1 = c （箭头函数简写），这样会在实例的属性中存储对DOM节点的引用，使用时可通过this.input1来使用

我的理解 c会接收到当前节点作为参数，ref的值为函数的返回值，也就是this.input1 = c，因此是给实例下的input1赋值

createRef 形式（推荐写法）

四、组件组合使用

五、受控组件和非受控组件

包含表单元素的组件分为非受控租价与受控组件
受控组件：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
非受控组件：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）