下面总结一下知识点，便于查看：
1.事件
2.表单
3.setState
4.生命周期
5.函数组件
6.非受控组件
7.Portals
8.context
9.异步组件
10.性能优化
11.高阶组件HOC
12.Render Props
事件
1.使用bind
import React from 'react'
class EventDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'zhangsan',
}
// 修改方法的 this 指向
this.clickHandler1 = this.clickHandler1.bind(this)
}
render() {
// // this - 使用 bind
return
{this.state.name}
}
clickHandler1() {
console.log('this....', this) // this 默认是 undefined
this.setState({
name: 'lisi'
})
}
}
export default EventDemo2.使用静态方法
// this - 使用静态方法
return clickHandler2 {this.state.name}
// 静态方法，this 指向当前实例
clickHandler2 = () => {
this.setState({
name: 'lisi'
})
}3.event
click me
// 获取 event
clickHandler3 = (event) => {
event.preventDefault() // 阻止默认行为
event.stopPropagation() // 阻止冒泡
console.log('target', event.target) // 指向当前元素，即当前元素触发
console.log('current target', event.currentTarget) // 指向当前元素，假象！！！
// 注意，event 其实是 React 封装的。可以看 __proto__.constructor 是 SyntheticEvent 组合事件
console.log('event', event) // 不是原生的 Event ，原生的是 MouseEvent
console.log('event.__proto__.constructor', event.__proto__.constructor)
// 原生 event 如下。其 __proto__.constructor 是 MouseEvent
console.log('nativeEvent', event.nativeEvent)
console.log('nativeEvent target', event.nativeEvent.target) // 指向当前元素，即当前元素触发
console.log('nativeEvent current target', event.nativeEvent.currentTarget) // 指向 document ！！！
// 1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
// 2. event.nativeEvent 是原生事件对象
// 3. 所有的事件，都被挂载到 document 上
// 4. 和 DOM 事件不一样，和 Vue 事件也不一样
}结果如下：
表单
受控组件：通过change事件来改变state
import React from 'react'
class FormDemo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: 'curry',
info: '个人信息',
city: 'beijing',
flag: true,
gender: 'male'
}
}
render() {
// // 受控组件
// return
// {this.state.name}
// {/* 用 htmlFor 代替 for */}
//
//
// textarea - 使用 value
return
{this.state.info}
// // select - 使用 value
return
{this.state.city}
// // checkbox
return
{this.state.flag.toString()}
// // radio
return
male
female
{this.state.gender}
}
onInputChange = (e) => {
this.setState({
name: e.target.value
})
}
onTextareaChange = (e) => {
this.setState({
info: e.target.value
})
}
onSelectChange = (e) => {
this.setState({
city: e.target.value
})
}
onCheckboxChange = () => {
this.setState({
flag: !this.state.flag
})
}
onRadioChange = (e) => {
this.setState({
gender: e.target.value
})
}
}
export default FormDemosetState
1.不可变值
2.可能是异步更新
3.可能会被合并
不可变值：
import React from 'react'
class StateDemo extends React.Component {
constructor(props) {
super(props)
// 第一，state 要在构造函数中定义
this.state = {
count: 0
}
}
render() {
return
{this.state.count}
}
increase = () => {
// 第二，不要直接修改 state ，使用不可变值 ----------------------------
// this.state.count++ // 错误
this.setState({
count: this.state.count + 1 // SCU
})
// 操作数组、对象的的常用形式
// 不可变值（函数式编程，纯函数） - 数组
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 进行属性设置，这样违反不可变值
}
}
export default StateDemo打印如下：
setTimeout 中 setState 是同步的：
// setTimeout 中 setState 是同步的
setTimeout(() => {
this.setState({
count: this.state.count + 1
})
console.log('count in setTimeout', this.state.count)
}, 0)打印如下：
自己定义的 DOM 事件，setState 是同步的
bodyClickHandler = () => {
this.setState({
count: this.state.count + 1
})
console.log('count in body event', this.state.count)
}
componentDidMount() {
// 自己定义的 DOM 事件，setState 是同步的
document.body.addEventListener('click', this.bodyClickHandler)
}打印如下：
可能会被合并：
传入对象，会被合并（类似 Object.assign ）
// 传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1
this.setState({
count: this.state.count + 1
})
this.setState({
count: this.state.count + 1
})
this.setState({
count: this.state.count + 1
})传入函数，不会被合并。
// 传入函数，不会被合并。执行结果是 +3
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})
this.setState((prevState, props) => {
return {
count: prevState.count + 1
}
})生命周期：
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
本文暂时没有评论，来添加一个吧(●'◡'●)