组件

面向组件编程

什么是组件?

构建组件可以使用原生,但比较繁琐,因此,react开发了jsx语法

react中组件普遍使用jsx语法进行构建

jsx简介

每个react组件都是一个js函数,react组件使用一种叫做jsx的语法来扩展该标签.

jsx看起来很像html,但比html语法更严格.

jsx,

标签必须关闭

空标签,空标签不会渲染到dom中,

jsx

<input type="text" className="task" value={task} onBlur={(e) => setTask(e.target.value)} />

本以为这是对onchange事件的优化,在光标离开时,再更新状态,但没想到却是语法错误?

受控组件和非受控组件是react处理表单时的两种核心模式,理解其区别非常重要.

受控组件,数据由state控制

value绑定state,change更新state

受控组件感觉很像vue中的双向数据绑定.

非受控组件,

数据由dom自己管理,

关于受控组件和非受控组件的选择,受控优先,

在react组件中,有一条console.log信息,当组件属性发生改变时,会有两条调试信息输出?为什么,为什么是两条?

现象说明:

生产环境只会渲染一次

taskId++未生效,始终为1.

jsx

在传递组件属性时,如何多数传递,个别不需要传递怎么办?

使用参数解构,解构出不需要传递的参数,其他的使用展开运算符,传递给子组件即可.

state,

ref,

普通变量?

选择思路,如果数据和视图需要双向绑定?则必须使用state,如果需要在组件多次渲染之间保持持久化,需要使用ref.

ref的两种应用场景

数组的filter是浅拷贝,更加适合map+展开运算符,以返回一个新对象.

为什么必须返回一个新对象呢?

react依赖不可变性来检测状态变化.

安装

bash

npm install react-toastify