React

React 扩展

1. setState

1.1 setState 更新状态的两种写法

setState(stateChange, [callback]) ------对象式的 setState
- stateChange 为状态改变对象(该对象可以体现出状态的更改)
- callback 是可选的回调函数, 它在状态更新完毕、界面也更新后(render 调用后)才被调用
- ```
this.setState({count:count+1},()=>{
  console.log(this.state.count);
})
```
setState(updater, [callback]) ------函数式的 setState
- updater 为返回 stateChange 对象的函数。
- updater 可以接收到 state 和 props。
- callback 是可选的回调函数, 它在状态更新、界面也更新后(render 调用后)才被调用。
- ```
this.setState(state => ({count: state.count + 1}))
```

1.2 总结

对象式的 setState 是函数式的 setState 的简写方式(语法糖)
使用原则：
- 如果新状态不依赖于原状态 ===> 使用对象方式
- 如果新状态依赖于原状态 ===> 使用函数方式
- 如果需要在 setState() 执行后获取最新的状态数据，要在第二个 callback 函数中读取

2. lazyLoad

如果项目有很多组件，懒加载是一定要用的，提高性能。

懒加载步骤

通过 React 的 lazy 函数配合 import() 函数动态加载路由组件 ===> 路由组件代码会被分开打包
```
const Login = lazy(()=>import('@/pages/Login'))
```

通过 <Suspense> 指定在加载得到路由打包文件前显示一个自定义 loading 界面，Loading 组件不能懒加载

<Suspense fallback={<h1>loading.....</h1>}>
	<Switch>
		<Route path="/xxx" component={Xxxx}/>
		<Redirect to="/login"/>
	</Switch>
</Suspense>

3. Hooks

3.1 Hook 是什么

Hook 是 React 16.8.0 版本增加的新特性/新语法
可以让你在函数组件中使用 state 以及其他的 React 特性

3.2 三个常用的 Hook

State Hook: React.useState()
Effect Hook: React.useEffect()
Ref Hook: React.useRef()

3.3 State Hook

State Hook 让函数组件也可以有 state 状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)
useState() 说明:
- 参数: 第一次初始化指定的值在内部作缓存
- 返回值: 包含 2 个元素的数组, 第 1 个为内部当前状态值, 第 2 个为更新状态值的函数
setXxx() 2种写法:
- setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
- setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

3.4 Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
React 中的副作用操作:
- 发 ajax 请求数据获取
- 设置订阅 / 启动定时器
- 手动更改真实DOM
语法和说明:
```
React.useEffect(()=>{
  // 在此可以执行任何带副作用操作
  return ()=>{
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
},[stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
```
- 第二个值表示要检测的值，若为 []，则谁也不检测，副作用操作只会被执行一次(第一次)
- 若传递了第二个值，则在第一个和第二个值每次发生改变的时候，都会执行副作用操作
- 不传则代表监测所有值
可以把 useEffect Hook 看做如下三个函数的组合
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()

3.5 Ref Hook

Ref Hook 可以在函数组件中存储/查找组件内的标签或任意其它数据
语法: const refContainer = useRef()
作用: 保存标签对象, 功能与 React.createRef() 一样

3.6 实例

import React from 'react'
import ReactDOM from 'react-dom'

//类式组件
/* class Demo extends React.Component {

	state = {count:0}

	myRef = React.createRef()

	add = ()=>{
		this.setState(state => ({count:state.count+1}))
	}

	unmount = ()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('root'))
	}

	show = ()=>{
		alert(this.myRef.current.value)
	}

	componentDidMount(){
		this.timer = setInterval(()=>{
			this.setState( state => ({count:state.count+1}))
		},1000)
	}

	componentWillUnmount(){
		clearInterval(this.timer)
	}

	render() {
		return (
			<div>
				<input type="text" ref={this.myRef}/>
				<h2>当前求和为{this.state.count}</h2>
				<button onClick={this.add}>点我+1</button>
				<button onClick={this.unmount}>卸载组件</button>
				<button onClick={this.show}>点击提示数据</button>
			</div>
		)
	}
} */

function Demo() {
  //console.log('Demo');

  const [count, setCount] = React.useState(0)
  const myRef = React.useRef()

  React.useEffect(() => {
    let timer = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      clearInterval(timer)
    }
  }, [])

  //加的回调
  function add() {
    //setCount(count+1) //第一种写法
    setCount(count => count + 1)
  }

  //提示输入的回调
  function show() {
    alert(myRef.current.value)
  }

  //卸载组件的回调
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (<div>
    <input type="text" ref={myRef}/>
    <h2>当前求和为：{count}</h2>
    <button onClick={add}>点我+1</button>
    <button onClick={unmount}>卸载组件</button>
    <button onClick={show}>点我提示数据</button>
  </div>)
}

export default Demo

4. Fragment

可以不用必须有一个真实的 DOM 根标签了, 不会在界面产生 div 标签

<Fragment><Fragment>
<></>

两者的区别

Fragment 可以写属性，比如 key
空标签不能写属性

5. Context

5.1 理解

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

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

5.2 使用

创建 Context 容器对象：

const XxxContext = React.createContext()

渲染子组时，外面包裹 xxxContext.Provider, 通过 value 属性给后代组件传递数据：
```
<xxxContext.Provider value={数据}>
    子组件
</xxxContext.Provider>
```

后代组件读取数据：

//第一种方式:仅适用于类组件 
static contextType = xxxContext  // 声明接收context
this.context // 读取context中的value数据
	  
//第二种方式: 函数组件与类组件都可以
<xxxContext.Consumer>
  {
    value => ( // value就是context中的value数据
      要显示的内容
    )
  }
</xxxContext.Consumer>

5.3 实例

import React, {Component} from 'react'

//创建Context对象
const MyContext = React.createContext()
const {Provider, Consumer} = MyContext
export default class Demo extends Component {

  state = {username: 'tom', age: 18}

  render() {
    const {username, age} = this.state
    return (<div className="parent">
      <h3>我是A组件</h3>
      <h4>我的用户名是:{username}</h4>
      <Provider value={{username, age}}>
        <B/>
      </Provider>
    </div>)
  }
}

class B extends Component {
  render() {
    return (<div className="child">
      <h3>我是B组件</h3>
      <C/>
    </div>)
  }
}

// class C extends Component {
//   //声明接收context
//   static contextType = MyContext
//
//   render() {
//     const {username, age} = this.context
//     return (<div className="grand">
//       <h3>我是C组件</h3>
//       <h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
//     </div>)
//   }
// }

function C() {
  return (<div className="grand">
    <h3>我是C组件</h3>
    <h4>我从A组件接收到的用户名:
      <Consumer>
        {value => `${value.username},年龄是${value.age}`}
      </Consumer>
    </h4>
  </div>)
}

6. 组件优化

6.1 Component 的 2 个问题

只要执行 setState(), 即使不改变状态数据, 组件也会重新 render()
只当前组件重新 render(), 就会自动重新 render 子组件 ==> 效率低

6.2 效率高的做法

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

6.3 原因

Component 中的 shouldComponentUpdate() 总是返回 true

4.4 解决方法

方案一

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

方案二

使用 PureComponent(extends PureComponent)

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

只是进行 state 和 props 数据的浅比较, 如果只是数据对象内部数据变了, 返回 false

不要直接修改 state 数据, 而是要产生新数据（setState）

项目中一般使用 PureComponent 来优化

7. render props

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

Vue 中:

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

React中:

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

7.2 children props

export default class Parent extends Component {
  render() {
    return (<div className="parent">
      <h3>我是Parent组件</h3>
      <A>
        <B/>
      </A>
    </div>)
  }
}

class A extends Component {
  state = {name: 'tom'}

  render() {
    console.log(this.props);
    return (<div className="a">
      <h3>我是A组件</h3>
      {this.props.children}
    </div>)
  }
}

class B extends Component {
  render() {
    console.log('B--render');
    return (<div className="b">
      <h3>我是B组件</h3>
    </div>)
  }
}

标签体内容隐藏在 {this.props.children} 中。
问题: 如果 B 组件需要 A 组件内的数据 ==> 做不到

7.3 render props

import React, {Component} from 'react'

export default class Parent extends Component {
  render() {
    return (<div className="parent">
      <h3>我是Parent组件</h3>
      <A render={(name) => <B name={name}/>}/>
    </div>)
  }
}

class A extends Component {
  state = {name: 'tom'}

  render() {
    console.log(this.props);
    const {name} = this.state
    return (<div className="a">
      <h3>我是A组件</h3>
      {this.props.render(name)}
    </div>)
  }
}

class B extends Component {
  render() {
    console.log('B--render');
    return (<div className="b">
      <h3>我是B组件,{this.props.name}</h3>
    </div>)
  }
}

render 是函数名，可以任意起。

8. 错误边界

8.1 理解

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

8.2 特点

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

8.3 使用方式

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

render() {
  return (<div>
    <h2>我是Parent组件</h2>
    {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child/>}
  </div>)
}

只能在生产环境使用，开发环境仍然会显示错误界面。

9. 组件通讯方式总结

9.1 几种通讯方式

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

9.2 比较好的搭配方式

父子组件：props

兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理

祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText (用的少)

如果觉得文章对你有用，请随意赞赏

前端 react

React 扩展

https://blog.rainsheep.cn/archives/react-kuo-zhan

作者

Rainsheep

发布于

2023-08-20

更新于

2023-12-28

许可协议

CC BY 4.0