React - 扩展

1.setState

setState更新状态的2种写法

(1). setState(stateChange, [callback])------对象式的setState

​ 1.stateChange为状态改变对象(该对象可以体现出状态的更改)

​ 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

(2). setState(updater, [callback])------函数式的setState

​ 1.updater为返回stateChange对象的函数。

​ 2.updater可以接收到state和props。

​ 4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

export default class Demo extends Component {
  state = {count:6}
  add = () => {
    // 对象形式
    const { count } = this.state
    this.setState({count:count+1})
    // 函数形式
    this.setState((state, props) => {
      console.log('函数组件可接收的参数：', state, props);
      return {count:10}
    }, () => {
      console.log('更新组件后执行');
    })
  }
  render() {
    return (
      <div>
        <h1>当前值：{this.state.count}</h1>
        <button onClick={this.add}>点我加一</button>
      </div>
    )
  }
}

总结:

1.对象式的setState是函数式的setState的简写方式(语法糖)

2.使用原则：

​ (1).如果新状态不依赖于原状态 ===> 使用对象方式

​ (2).如果新状态依赖于原状态 ===> 使用函数方式

​ (3).如果需要在setState()执行后获取最新的状态数据,

​ 要在第二个callback函数中读取

2.lazyLoad

路由组件的lazyLoad

1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包

 const Login = lazy(()=>import('@/pages/Login'))

2.通过指定在加载得到路由打包文件前显示一个自定义loading界面 ，fallback 的值可以是jsx 也可以是一个组件

<Suspense *fallback*={<h1>loading.....</h1>}>

​    <Switch>

​      <Route *path*="/xxx" *component*={Xxxx}/>

​      <Redirect *to*="/login"/>

​    </Switch>

  </Suspense>

3. Hooks

3.1 React Hook/Hooks是什么?

(1). Hook是React 16.8.0版本增加的新特性/新语法

(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

3.2 三个常用的Hook

(1). State Hook: React.useState()

(2). Effect Hook: React.useEffect()

(3). Ref Hook: React.useRef()

3.3 State Hook

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作

(2). 语法: const [xxx, setXxx] = React.useState(initValue)

(3). useState()说明:

​ 参数: 第一次初始化指定的值在内部作缓存

​ 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

(4). setXxx()2种写法:

​ setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值

​ setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

function Demo() {
  const [count, setCount] = React.useState(3)
  const [person, setPerson] = React.useState({ name: 'jack' })
  function add() {
    setCount(count => count + 1)
  }
  function pushPerson() {
    setPerson(person => ({ name: 'mary' }))
  }
  return (
    <div>
      <h1>当前数值：{count}</h1>
      <button onClick={add}>点我加1</button>
      <h1>当前人员：{person.name}</h1>
      <button onClick={pushPerson}>点我换人</button>
    </div>
  )
}

3.4. Effect Hook

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)

(2). React中的副作用操作: 发ajax请求数据获取；设置订阅 / 启动定时器；手动更改真实DOM；

(3). 语法和说明:

​ useEffect(() => { // 在此可以执行任何带副作用操作

​ return () => { // 在组件卸载前执行

​ // 在此做一些收尾工作, 比如清除定时器/取消订阅等

​ }

​ }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行

(4). 可以把 useEffect Hook 看做如下三个函数的组合

​ componentDidMount()

​ componentDidUpdate()

​ componentWillUnmount()

const Effect = () => {
  const [count, setCount] = React.useState(5)
  const add = () => {
    setCount(count => count + 1)
  }
  // 第一种用法，当 useEffect 第二个参数不传时，则组件任何状态的改变都会触发到 useEffect 的第一个参数，相当于 componentDidmount 与 componentDidUpdate 的结合
  React.useEffect(() => {
    console.log('@')
  })
  // 第二种用法，当 useEffect 第二个参数传 [] 时，则不检测组件的变化，相当于 componentDidmount， 只在初始化时执行
  React.useEffect(() => {
    console.log('@')
  }, [])
  // 第三种用法，当 useEffect 第二个参数传 [count] 时，则检测某一状态的变化，相当于 componentDidUpdate ， 当初始化和 count 状态改变时执行；第二个参数可以以数组形式监测多个状态
  React.useEffect(() => {
    console.log('count change')
  }, [count])
  // 第四种用法，当 useEffect 第一个参数返回一个函数时，这个函数就相当于 componentWillUnmount 
  React.useEffect(() => {
    let timer = setInterval(() => {
      add()
    }, 1000);
    return () => {
      clearInterval(timer)
    }
  }, [])
  const updown = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }
  return (
    <div>
      <h1>当前数值：{count}</h1>
      <button onClick={add}>点我加1</button>
      <button onClick={updown}>卸载组件</button>
    </div>
  )
}

3.5 Ref Hook

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据

(2). 语法: const refContainer = useRef()

(3). 作用:保存标签对象,功能与React.createRef()一样

const Ref = () => {
  const myref = React.useRef()
  const tellMe = () => {
    console.log(myref.current.value);
  }
  return (
    <div>
      <input ref={myref}/>
      <button onClick={tellMe}>提示数据</button>
    </div>
  )
}

4. Fragment

使用： || <></>

作用： 可以不用必须有一个真实的DOM根标签了，但是 Fragment 只能有一个标签属性 key ，空标签则不允许有属性

5. Context

理解： 一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用 js：

1. 创建Context容器对象：const XxxContext = React.createContext()

2. 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：

<xxxContext.Provider value={数据}>

子组件

</xxxContext.Provider>

3. 后代组件读取数据：

第一种方式:仅适用于类组件：

static contextType = xxxContext // 声明接收context

this.context // 读取context中的value数据

第二种方式: 函数组件与类组件都可以：

<xxxContext.Consumer>

{

​ value => ( // value就是context中的value数据

​ 要显示的内容)

}

</xxxContext.Consumer>

const myContext = React.createContext()
const { Provider, Consumer } = myContext
class Demo extends Component {
  state = {name: 'jack', age: 18}
  changePer = () => {
    this.setState((state) =>({name: 'mary', age: 20}))
  }
  render() {
    const { name, age } = this.state
    return (
      <div className="parent">
        <h1>我是A组件</h1>
        <button onClick={this.changePer}>点我试试</button>
        <div>我的数据是：{name} --- {age}</div>
        <Provider value={this.state}>
          <B person={this.state}/>
        </Provider>
      </div>
    )
  }
}

class B extends Component {
  render() {
    const { name, age } = this.props.person
    return (
      <div className="child">
        <h1>我是B组件</h1>
        <div>我的数据是：{name} ---- {age}</div>
        <C/>
        <D/>
      </div>
    )
  }
}

class C extends Component {
  static contextType = myContext;
  render() {
    const { name, age } = this.context
    return (
      <div className="grand">
        <h1>我是C组件</h1>
        <div>我的数据是：{name} ---- {age}</div>
      </div>
    )
  }
}

function D () {
  return (
    <div className="grand1">
      <h1>我是C组件</h1>
      <div>我的数据是：
        <Consumer>
          {
            value => `${value.name} --- ${value.age}`
          }
        </Consumer>
      </div>
    </div>
  )
}
export default Demo

注意： 在应用开发中一般不用context, 一般都它的封装react插件

6. 组件优化

Component的2个问题：

1. 只要执行setState(),即使不改变状态数据, 组件也会重新render()

2. 只当前组件重新render(), 就会自动重新render子组件 ==> 效率低

效率高的做法：

只有当组件的state或props数据发生改变时才重新render()

原因：

Component中的shouldComponentUpdate()总是返回true

解决：

办法1:

重写shouldComponentUpdate()方法：比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false

办法2:

使用PureComponent：PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true

**注意: **

1.PureComponent只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false ；不要直接修改state数据, 而是要产生新数据（不建议直接修改对象内部的属性，以及数组索引的内容，因为操作的还是同一个对象，pureComponent 会认为是同一对象不做处理）

2.项目中一般使用PureComponent来优化

import React, { Component, Fragment, PureComponent } from 'react'

export default class Parent extends PureComponent {
  state = {carName: '奥迪'}
  changeCar = () => {
    this.setState({carName: '迈巴赫'})
  }
  // 方法一：
  // shouldComponentUpdate (nextProps, nextState) {
  //   // console.log(this.props, this.state); //目前的props和state
	// 	// console.log(nextProps, nextState);//接下要变化的目标props，目标state
  //   return !(nextState.carName === this.state.carName)
  // }
  render() {
    console.log('父组件重新渲染');
    const { carName } = this.state
    return (
      <Fragment>
        <h1>我是父组件</h1>
        <button onClick={this.changeCar}>我想换车</button>
        <div>我有车：{carName}</div>
        <Child carName={'法拉利'}/>
      </Fragment>
    )
  }
}

class Child extends PureComponent {
  // shouldComponentUpdate (nextProps, nextState) {
  //   return !(nextProps.carName === this.props.carName)
  // }
  render() {
    console.log('子组件重新渲染');
    return (
      <Fragment>
        <h1>我是子组件</h1>
        <div>我爸有车：{this.props.carName}</div>
      </Fragment>
    )
  }
}

7.render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中:

使用slot技术, 也就是通过组件标签体传入结构

React中:

使用children props: 通过组件标签体传入结构

使用render props: 通过组件标签属性传入结构, 一般用render函数属性

children props：

 <A>
  <B>xxxx</B>              => 父组件
 </A>

 {this.props.children}	   => A组件

问题: 如果B组件需要A组件内的数据, ==> 做不到

render props：

 <A render={(data) => <C data={data}></C>}></A>

A组件: {this.props.render(内部state数据)}

C组件: 读取A组件传入的数据显示 {this.props.data}

举例：Demo 中用了 A 组件且利用属性返回函数，在A组件中传入数据，在父组件中接收。

class Demo extends Component {
  render() {
    return (
      <div>
        我是父组件
        <A render={(name) => <B name={name}/>}/>
      </div>
    )
  }
}

class A extends Component {
  state = {name: 'Selene'}
  render() {
    return (
      <div>
        我是A组件
        {this.props.render(this.state.name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div>
        我是B组件
        My name is {this.props.name}
      </div>
    )
  }
}
export default Demo

8.错误边界:

**理解：**错误边界：用来捕获 后代组件 错误，渲染出备用页面

特点： 只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

**使用方式：**getDerivedStateFromError配合componentDidCatch

生命周期函数，一旦后台组件报错，就会触发

class Demo extends Component {
  state = {
    hasError: ''
  }
//当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
  static getDerivedStateFromError(error){
    // 在render之前触发,返回新的state
    console.log('@@@', error);
    return {hasError: error}
  }
  
  // 统计页面的错误。发送请求发送到后台去
  componentDidCatch(){
    console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
  }
  render() {
    return (
      <Fragment>
        {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <B/>}
      </Fragment>
    )
  }
}

9. 组件通信方式总结

组件间的关系：

• 父子组件
• 兄弟组件（非嵌套组件）
• 祖孙组件（跨级组件）

几种通信方式：

	1.props：
		(1).children props
		(2).render props
	2.消息订阅-发布：
		pubs-sub、event等等
	3.集中式管理：
		redux、dva等等
	4.conText:
		生产者-消费者模式

比较好的搭配方式：

	父子组件：props
	兄弟组件：消息订阅-发布、集中式管理
	祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)