React 基本使用

【注意】代码演示时，和 vue 相关的知识对比一下 —— 重要！！！

创建项目

安装最新版本 nodejs ，要求版本 >= 8.10。 安装 npm i -g create-react-app ，然后执行 create-react-app xxx 创建项目

JSX 基本语法

查看代码

• 变量和表达式
• class 和 style
• 子元素和组件

另外还有原生 html （未过滤 xss）的加载方式

条件

查看代码

• if else
• 逻辑运算符 && ||
• 三元表达式

列表

查看代码

• map 函数
• key（作用和 vue 的相同）

事件

查看代码

• this
• event 对象（真实的 event 和 currentTarget）
• 传递参数

表单

• 受控组件 （非受控组件后面讲）
• input textarea select - 用 value
• checkbox radio - 用 checked

组件和 props (和类型检查)

• props 传递数据
• props 传递函数
• props 类型检查 （安装 npm i prop-types --save）

setState

• 用不可变值（对象、数组）或者用 immutable.js
• 可能是异步更新（什么情况下同步更新？）
• 可能会被合并（什么情况下不合并？）

// 不可变值 - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除
this.setState({
    list1: this.state.list1.concat(100), // 追加
    list2: [...this.state.list2, 100], // 追加
    list3: this.state.list3.slice(0, 3), // 截取
    list4: this.state.list4.filter(item => item > 100) // 筛选
    list5: list5Copy // 其他操作
})
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值

// 不可变值 - 对象
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})
// 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

生命周期

图示

• componentDidMount 可获取 ajax 数据

• shouldComponentUpdate 可做性能优化

• componentWillUnmount 可销毁事件绑定，避免内存泄露

• shouldComponentUpdate 和 componentWillUpdate 中，不要 setState ，可能会死循环

• 挂载过程

• 更新过程

• 销毁过程