react相关知识汇总

react的相关知识汇总

1. react的绑定事件

1.1 使用 bind 在 constructor 中绑定this；

1.2 使用箭头函数，因为箭头函数没有this，this指向当前实例；

1.3 event事件是react的模拟事件

1. event 是 SyntheticEvent ，模拟出来 DOM 事件所有能力
2. event.nativeEvent 是原生事件对象
3. currentTarget 所有的事件，都被挂载到 document 上
4. 和 DOM 事件不一样，和 Vue 事件也不一样

1.4 传参方式，最后追加一个event

import React from 'react'
class EventDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'zhangsan',
            list: [
                {
                    id: 'id-1',
                    title: '标题1'
                },
                {
                    id: 'id-2',
                    title: '标题2'
                },
                {
                    id: 'id-3',
                    title: '标题3'
                }
            ]
        }
        // 修改方法的 this 指向，只用执行一次即可，不用在render中加bind，否则每次渲染组件都去绑定this
        this.clickHandler1 = this.clickHandler1.bind(this)
    }
    render() {
        // // this - 使用 bind
        // return <p onClick={this.clickHandler1}>
        //     {this.state.name}
        // </p>
        // // this - 使用静态方法
        // return <p onClick={this.clickHandler2}>
        //     clickHandler2 {this.state.name}
        // </p>
        // // event
        // return <a href="https://imooc.com/" onClick={this.clickHandler3}>
        //     click me
        // </a>
        // 传递参数 - 用 bind(this, a, b)
        return <ul>{this.state.list.map((item, index) => {
            return <li key={item.id} onClick={this.clickHandler4.bind(this, item.id, item.title)}>
                index {index}; title {item.title}
            </li>
        })}</ul>
    }
    clickHandler1() {
        // console.log('this....', this) // this 默认是 undefined
        this.setState({
            name: 'lisi'
        })
    }
    // 静态方法，this 指向当前实例
    clickHandler2 = () => {
        this.setState({
            name: 'lisi'
        })
    }
    // 获取 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 事件也不一样
    }
    // 传递参数
    clickHandler4(id, title, event) {
        console.log(id, title)
        console.log('event', event) // 最后追加一个参数，即可接收 event
    }
}
export default EventDemo

表单组件【受控组件】

render中设置 value、onChange事件

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>
}
onInputChange = (e) => { //这里使用了箭头函数，否则使用bind绑定this
    this.setState({
        name: e.target.value
    })
}

其他表单组件

// 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>

props的类型检查

import React from 'react';
import PropTypes from 'prop-types';
class List extends React.Component{
  constructor(props){
    super(props);
    this.state = {
        title: ''
    }
  }
  render() {}
}
List.propTypes = {
  list:PropTypes.arrayof(PropTypes.object).isRequired
}

父组件中向子组件中传递参数

传递参数（相当于vue中的props）
传递函数（相当于vue中的监听事件：@evntClick）

例如父组件中定义：

render() {
  return <div>
      <Input submitTitle={this.onSubmitTitle}/>{/*父组件中给子组件传入的函数props，相当于vue中父组件的监听函数*/}
      <List list={this.state.list}/>{/*这里是给子组件传递的props*/}
  </div>
}

在子组件 input中定义

class Input extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            title: ''
        }
    }
    render() {
        return <div>
            <input value={this.state.title} onChange={this.onTitleChange}/>
            <button onClick={this.onSubmit}>提交</button>
        </div>
    }
    onTitleChange = (e) => {
        this.setState({
            title: e.target.value
        })
    }
    onSubmit = () => {
        const { submitTitle } = this.props
        submitTitle(this.state.title) // 相当于vue的 $.emit('submitTitle',this.state.title)
        this.setState({
            title: ''
        })
    }
}

setState

state的初始化放在 constructor 中，函数组件，默认没有state；

class StateDemo extends React.Component {
    constructor(props) {
        super(props)
        // 第一，state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
}

1. 不可变值，不能改变state本身

对比：Vue中可以直接对data数据赋值，但是监听数组发生变化，不能直接改变数组的值。而react中不要直接改变state的值，不但无法实现页面的渲染，而且也会影响性能

如 this.state.count++

// 不可变值（函数式编程，纯函数） - 数组
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), // 截取。slice也不影响原来的数据
    list4: this.state.list4.filter(item => item > 100), // 筛选
    list5: list5Copy // 其他操作
})
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值
// 比如 push 操作就改变了state.list的值，一定要记得如果要改变 state 的值，使用this.setState方法
// 不可变值 - 对象
this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})
// 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值

可能是异步更新

2.1 直接定义是异步的

this.setState({
    count: this.state.count + 1
}, () => {
    // 联想 Vue $nextTick - DOM
    console.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state
})
console.log('count', this.state.count) // 异步的，拿不到最新值

2.2 在setTimeout中是同步的

// setTimeout 中 setState 是同步的
setTimeout(() => {
    this.setState({
        count: this.state.count + 1
    })
    console.log('count in setTimeout', this.state.count)
}, 0)

2.3 自定义的事件状态是同步的

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)
}
componentWillUnmount() {
    // 及时销毁自定义 DOM 事件
    document.body.removeEventListener('click', this.bodyClickHandler)
    // clearTimeout
}

可能会被合并

类似于vue，改变状态是异步的，放在了 this.$nextTick 中，待页面中同步事件完成后，才去执行异步函数，而多次定义同一个状态数据，相当于后面的会覆盖前面数据。

// 传入对象，会被合并（类似 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,类似于vue中定义data用的也是函数，函数不会被合并，因为函数是一段可执行的代码。

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
    }
})

react的生命周期

函数组件

函数组件特点：

纯函数，输入props，输出jsx；
没有实例，没有生命周期，没有state，
不能扩展其他方法

function List(props){
  const {list} = this.props;
  return 
  <ul>{list.map((item,index)=>{
    return 
      <li key={item.id}>
        <span>{item.title}</span>
      </li>
    })
  }
  </ul>
}

非受控组件

区别于受控组件：

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>
}
onInputChange = (e) => { //这里使用了箭头函数，否则使用bind绑定this
    this.setState({
        name: e.target.value
    })
}

非受控组件：

ref
defaultValue-defaultChecked
手动操作DOM元素

下面的示例：没有设置onChange事件，所以文本中的state不会随着input传入的参数而变化；但是可以根据ref，获取dom的数据；
state.name 只是给input赋值了初始值，input输入并不会改变 state.name

import React from 'react'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'xx',
            flag: true,
        }
        this.nameInputRef = React.createRef() // 创建 ref
        this.fileInputRef = React.createRef()
    }
    render() {
        // input defaultValue
        // return <div>
        //     {/* 使用 defaultValue 而不是 value ，使用 ref */}
        //     <input defaultValue={this.state.name} ref={this.nameInputRef}/>
        //     {/* state 并不会随着改变 */}
        //     <span>state.name: {this.state.name}</span>
        //     <br/>
        //     <button onClick={this.alertName}>alert name</button>
        // </div>
        // // checkbox defaultChecked
        // return <div>
        //     <input
        //         type="checkbox"
        //         defaultChecked={this.state.flag}
        //     />
        // </div>
        // file文件上传功能,实用场景，必须手动操作DOM，
        return <div>
            <input type="file" ref={this.fileInputRef}/>
            <button onClick={this.alertFile}>alert file</button>
        </div>
    }
    alertName = () => {
        const elem = this.nameInputRef.current // 通过 ref 获取 DOM 节点
        alert(elem.value) // 不是 this.state.name
    }
    alertFile = () => {
        const elem = this.fileInputRef.current // 通过 ref 获取 DOM 节点
        alert(elem.files[0].name)
    }
}
export default App

受控组件VS非受控组件：

优先使用受控组件，符合React设计原则；
必须操作DOM时，再使用非受控组件；

Portals

组件默认会按照既定层次嵌套渲染；
如何让组件渲染到父组件以外？

PS : this.props.children相当于vue的slot,可以获取父组件中两个标签中的内容

父组件调用：

render(){
  return (
    <PortalsDemo>Modal 内容</PortalsDemo>
  )
}

子组件：

import React from 'react'
import ReactDOM from 'react-dom'
import './style.css'
class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        // 正常渲染
        return <div className="modal">
            {this.props.children} {/* vue slot */}
        </div>
        使用 Portals 渲染到 body 上。
        fixed 元素要放在 body 上，有更好的浏览器兼容性。
    }
}
export default App

对应的css，该弹窗是一个fixed固定位置：

.modal {
    position: fixed;
    width: 300px;
    height: 100px;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    background-color: #000;
    /* opacity: .2; */
    color: #fff;
    text-align: center;
}

可以看到图片层级在组件中层层嵌套，过深，所以如何将其放在最外层呢？

import React from 'react'
import ReactDOM from 'react-dom'//增加这里++
import './style.css'
class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return ReactDOM.createPortal(//createPortal
            <div className="modal">{this.props.children}</div>,
            document.body // 加载到哪个 DOM 节点
        )
    }
}
export default App

有图可以看出，该弹窗虽然放在了子组件中，但是已经hack到body层去了。

使用场景：

1. 父组件使用了 oveflow:hidden；
  联想起在PC端plus会员的react中，头部卡片的气泡，使用position超出了本身的层级，使用 Portals 可以轻松外迁移该气泡组件。
1. 父组件z-index值太小
1. fixed 需要放在 body 第一层

context

公共信息（语言、主题）如何传递给各个组件？

用props 太繁琐
用 redux 小题大做，本身没有什么逻辑，只是一些变量的传递

import React from 'react'
// 创建 Context 填入默认值（任何一个 js 变量）
const ThemeContext = React.createContext('light')
class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            theme: 'light'
        }
    }
    render() { //那些组件使用 context ，则在其外层包裹 ThemeContext 组件
        return 
        <ThemeContext.Provider value={this.state.theme}>
            <Toolbar />
            <hr/>
            <button onClick={this.changeTheme}>change theme</button>
        </ThemeContext.Provider>
    }
    changeTheme = () => {
        this.setState({ //父组件中统一修改 theme
            theme: this.state.theme === 'light' ? 'dark' : 'light'
        })
    }
}
export default App

Toolbar 组件没有使用context：

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar(props) {
    return (
        <div>
            <ThemedButton />
            <ThemeLink />
        </div>
    )
}

孙子组件：

// 底层组件 - class 组件
class ThemedButton extends React.Component {
    // 指定 contextType 读取当前的 theme context。
    // static contextType = ThemeContext // 也可以用 ThemedButton.contextType = ThemeContext
    render() {
        const theme = this.context // React 会往上找到最近的 theme Provider，然后使用它的值。
        return <div>
            <p>button's theme is {theme}</p>
        </div>
    }
}
ThemedButton.contextType = ThemeContext // 指定 contextType 读取当前的 theme context。

对于函数组件，没有实例，没有this

// 底层组件 - 函数是组件
function ThemeLink (props) {
    // const theme = this.context // 会报错。函数式组件没有实例，即没有 this
    // 函数式组件可以使用 Consumer
    return <ThemeContext.Consumer>
        { value => <p>link's theme is {value}</p> }
    </ThemeContext.Consumer>
}

异步组件

import React from 'react'
const ContextDemo = React.lazy(() => import('./ContextDemo'))
class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return <div>
            <p>引入一个动态组件</p>
            <hr />
            <React.Suspense fallback={<div>Loading...</div>}>
                <ContextDemo/>
            </React.Suspense>
        </div>
        // 1. 强制刷新，可看到 loading （看不到就限制一下 chrome 网速）
        // 2. 看 network 的 js 加载
    }
}
export default App

react 的性能优化

shouldComponentUpdate(简称SCU)
PureComponent 和 React.memo
不可变值 immutable.js

shouldComponentUpdate 的基本方法

react默认：父组件更新，子组件无条件也更新

shouldComponentUpdate(nextProps,nextState){
  if(nextState.count !== this.state.count){
    return true; //可以渲染
  }
  return false; //不重复渲染
}

为啥 React 不在 SCU 中默认比较前后数据不相同再去渲染页面？

例如，react中用下面的方式在SCU中深度比较：

import _ from 'lodash'
// 增加 shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
    // _.isEqual 做对象或者数组的深度比较（一次性递归到底）,耗费性能，不建议使用，推荐使用浅度比较：PureComponent
    if (_.isEqual(nextProps.list, this.props.list)) {
        // 相等，则不重复渲染
        return false
    }
    return true // 不相等，则渲染
}

如果在父组件中用户这样去写：

// 为了演示 SCU ，故意写的错误用法
this.state.list.push({
    id: `id-${Date.now()}`,
    title
})
this.setState({
    list: this.state.list
})

这样先改变list，再赋值给list。
nextProps.list和this.props.list则永远相等，SCU导致页面不再渲染！！引起严重的BUG！！
所以在SCU中 react 不能去做深度比较，但是建议用户 react的data一定不要改变原来的data数据，而是在新的数据基础上改动。这样SCU则可以用来深度比较，性能优化！

// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值
// 比如 push 操作就改变了state.list的值，一定要记得如果要改变 state 的值，使用this.setState方法

PureComponent 和 memo

因为在SCU中中使用深度比较，会带来性能问题，所以react推荐使用浅比较，用户的数据对应的也要设置成简单的数据；
PureComponent，在SCU中实现了浅比较
memo，函数组件中的PureComponent
浅比较已使用大部分情况，数据做扁平化处理

class List extends React.PureComponent {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props
        return <ul>{list.map((item, index) => {
            return <li key={item.id}>
                <span>{item.title}</span>
            </li>
        })}</ul>
    }
    shouldComponentUpdate() {/*在PureComponent中默认设置了浅比较*/}
}

immutable.js

彻底拥抱"不可变值"
基于共享数据，但不是深拷贝（深拷贝性能不好），速度好
有一定学习和迁移成本，按需使用

const map1 = Immutable.Map({a:1,b:2});
const map2 = map1.set('b',50)
map1.get('b'); //2
map2.get('b'); //50

高阶组件

HOC 和 render props
两个方式都是抽离公共逻辑；

1. HOC 简单示例：

//高阶组件不是一种功能，而是一种模式
const HOCFactory = (Component)=>{
  class HOC extendes React.Component {
    //在此定义多个组件的公共逻辑
    render(){ //返回拼装的结果，带上原组件的props
      return <Component {...this.props}/>
    }
  }
  return HOC
}
const EnhanceComponent1 = HOCFactory(component1);
const EnhanceComponent2 = HOCFactory(component2);

实际使用例子,在页面中显示鼠滑动过的坐标：

import React from 'react'

// 高阶组件
const withMouse = (Component) => {
    class withMouseComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = { x: 0, y: 0 }
        }
        handleMouseMove = (event) => {
            this.setState({
                x: event.clientX,
                y: event.clientY
            })
        }
  
        render() {
            return (
                <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
                    {/* 1. 透传所有 props 2. 增加 mouse 属性 */}
                    <Component {...this.props} mouse={this.state}/>
                </div>
            )
        }
    }
    return withMouseComponent
}

const App = (props) => {
    const a = props.a
    const { x, y } = props.mouse // 接收 mouse 属性
    return (
        <div style={{ height: '500px' }}>
            <h1>The mouse position is ({x}, {y})</h1>
            <p>{a}</p>
        </div>
    )
}

export default withMouse(App) // 返回高阶函数

实际应用中，redux中的connect就是一个高阶组件：

import { connect } from 'react-redux'
//connect 是高阶组件
const VisibleTodoList = connect(
  mapStateToProps,
  mapDIspatchToProps
)(TodoList)
export default VisibleTodoList;

2. render Props

import React from 'react'
import PropTypes from 'prop-types'

class Mouse extends React.Component {
    constructor(props) {
        super(props)
        this.state = { x: 0, y: 0 }
    }
  
    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }
  
    render() {
      return (
        <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
            {/* 将当前 state 作为 props ，传递给 render （render 是一个函数组件） */}
            {this.props.render(this.state)}
        </div>
      )
    }
}
Mouse.propTypes = {
    render: PropTypes.func.isRequired // 必须接收一个 render 属性，而且是函数
}

const App = (props) => (
    <div style={{ height: '500px' }}>
        <p>{props.a}</p>
        <Mouse render={
            /* render 是一个函数组件 */
            ({ x, y }) => <h1>The mouse position is ({x}, {y})</h1>
        }/>
        
    </div>
)

/**
 * 即，定义了 Mouse 组件，只有获取 x y 的能力。
 * 至于 Mouse 组件如何渲染，App 说了算，通过 render prop 的方式告诉 Mouse 。
 */

export default App

高阶组件

Parent(Child)
//Parent、Child 都是一个函数
//Parent 中定义返回组件
const Parent = (Component) => {
  class ParentComponent extends React.Component {
      render(){
        //Parent 中定义公共逻辑
        return <Component {...props}/>
      }
  }
  return ParentComponent
}

const Child = (props)=>{
  return (
    <div>props.x</div>
  )
}
const Child2 = (props)=>{
  return (
    <div>my name is {props.x}</div>
  )
}
export default Parent(Child)

render props

//Child 中定义公共逻辑
class Child extends React.Component {
    render() {
      return (
        <div>
            {this.props.render(this.state)}
        </div>
      )
    }
}

const Parent = (props) => (
  <Child render={
      ({ x, y }) => <h1>is ({x}, {y})</h1>
  }/>    
)
const Parent2 = (props) => (
  <Child render={
      ({ x }) => <h1>my is ({x})</h1>
  }/>    
)
export default Parent