react基础知识总结

下面总结一下知识点，便于查看：

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 <p onClick={this.clickHandler1}>
            {this.state.name}
        </p>
    }
    clickHandler1() {
        console.log('this....', this) // this 默认是 undefined
        this.setState({
            name: 'lisi'
        })
    }
}

export default EventDemo

2.使用静态方法

// this - 使用静态方法
return <p onClick={this.clickHandler2}>clickHandler2 {this.state.name}</p>

// 静态方法，this 指向当前实例
clickHandler2 = () => {
   this.setState({
       name: 'lisi'
   })
}

3.event

<a href="https://baidu.com/" onClick={this.clickHandler3}>click me</a>

// 获取 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 <div>
        //     <p>{this.state.name}</p>
        //     <label htmlFor="inputName">姓名：</label> {/* 用 htmlFor 代替 for */}
        //     <input id="inputName" value={this.state.name} onChange={this.onInputChange}/>
        // </div>

        // textarea - 使用 value
        return <div>
            <textarea value={this.state.info} onChange={this.onTextareaChange}/>
            <p>{this.state.info}</p>
        </div>

        // // select - 使用 value
        return <div>
            <select value={this.state.city} onChange={this.onSelectChange}>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
            <p>{this.state.city}</p>
        </div>

        // // checkbox
        return <div>
            <input type="checkbox" checked={this.state.flag} onChange={this.onCheckboxChange}/>
            <p>{this.state.flag.toString()}</p>
        </div>

        // // radio
        return <div>
            male <input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.onRadioChange}/>
            female <input type="radio" name="gender" value="female" checked={this.state.gender === 'female'} onChange={this.onRadioChange}/>
            <p>{this.state.gender}</p>
        </div>
    }
    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 FormDemo

setState

1.不可变值

2.可能是异步更新

3.可能会被合并

不可变值：

import React from 'react'

class StateDemo extends React.Component {
    constructor(props) {
        super(props)

        // 第一，state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
    render() {
        return <div>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    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/