• [尚硅谷React笔记]——第8章 扩展

    目录：

    1. 扩展1_setState
    2. 扩展2_lazyLoad
    3. 扩展3_stateHook
    4. 扩展4_EffectHook
    5. 扩展5_RefHook
    6. 扩展6_Fragment
    7. 扩展7_Context
    8. 扩展8_PureComponent
    9. 扩展9_renderProps
    10. 扩展10_ErrorBoundary
    11. 组件通信方式总结

    1.扩展1_setState

    setState更新状态的2种写法

    • setState(stateChange, [callback])------对象式的setState
      • 1.stateChange为状态改变对象(该对象可以体现出状态的更改)
      • 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
    • setState(updater, [callback])------函数式的setState
      • 1.updater为返回stateChange对象的函数。
      • 2.updater可以接收到state和props。
      • 3.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
    • 总结:
    • 1.对象式的setState是函数式的setState的简写方式(语法糖)
    • 2.使用原则：
      • (1).如果新状态不依赖于原状态 ===> 使用对象方式
      • (2).如果新状态依赖于原状态 ===> 使用函数方式
      • (3).如果需要在setState()执行后获取最新的状态数据, 
      • 要在第二个callback函数中读取

    Demo.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Demo extends Component {
    4.     state = {count: 0}
    5.  
    6.     add = () => {
    7.         //对象式的setState
    8.         // const {count} = this.state
    9.         // this.setState({count: count + 1}, () => {
    10.         //     console.log(this.state.count)
    11.         // })
    12.         // // console.log('12行的输出', this.state.count)
    13.  
    14.  
    15.         //函数式的setState
    16.         // this.setState((state, props) => {
    17.         //     console.log(state, props)
    18.         //     return {count: state.count + 1}
    19.         // })
    20.  
    21.         this.setState(state => ({count: state.count + 1}), () => {
    22.             console.log(this.state.count)
    23.         })
    24.  
    25.         // this.setState({count: this.state.count + 1})
    26.     }
    27.  
    28.     render() {
    29.         return (
    30.             
    31.                 
      当前求和为：{this.state.count}
    32.                 
    33.
  • );
  • }
  • }
  • export default Demo;

    • 2.扩展2_lazyLoad

    路由组件的lazyLoad

    1. //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
    2. 	const Login = lazy(()=>import('@/pages/Login'))
    3. 	
    4. 	//2.通过指定在加载得到路由打包文件前显示一个自定义loading界面
    5. 	loading.....}>
    6.         
    7.             "/xxx" component={Xxxx}/>
    8.             "/login"/>
    9.         
    10.

    About.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class About extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是About的内容
    8.
  • );
  • }
  • }
  • export default About;

    • Demo.jsx

    1. import React, {Component, lazy, Suspense} from 'react';
    2. import {NavLink, Route} from "react-router-dom";
    3. import Loading from "../Loading/Loading";
    4.  
    5. const Home = lazy(() => import('../Home/Home'))
    6. const About = lazy(() => import('../About/About'))
    7.  
    8.  
    9. class Demo extends Component {
    10.     render() {
    11.         return (
    12.             
    13.                 
      "row">
    14.                     
      "col-xs-offset-2 col-xs-8">
    15.                         
      "page-header">
      React Router Demo
    16.
  • "row">
  • "col-xs-2 col-xs-offset-2">
  • "list-group">
  • "list-group-item" to="/about">About
  • "list-group-item" to="/home">Home
  • "col-xs-6">
  • "panel">
  • "panel-body">
  • }>
  • "/about" component={About}>
  • "/home" component={Home}>
  • );
  • }
  • }
  • export default Demo;

    • Home.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Home extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是Home的内容
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Home;

    Loading.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Loading extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      'gray', color: 'orange'}}>Loading
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Loading;

    App.js

    1. import React, {Component} from 'react';
    2. import Demo from "./components/Demo/Demo";
    3.  
    4. class App extends Component {
    5.     render() {
    6.         return (
    7.             
    8.                 
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default App;

    index.js

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import {BrowserRouter} from "react-router-dom";
    5.  
    6. const root = ReactDOM.createRoot(document.getElementById('root'));
    7.  
    8. root.render(
    9.     
    10.         
    11.     
    12. );

    3.扩展3_stateHook

     React Hook/Hooks是什么?

    三个常用的Hook

    State Hook

     Demo.jsx

    1. import React, {Component} from 'react';
    2.  
    3. // class Demo extends Component {
    4. //     state = {count: 0}
    5. //
    6. //     add = () => {
    7. //         this.setState(state => ({count: state.count + 1}))
    8. //     }
    9. //
    10. //     render() {
    11. //         return (
    12. //             
    13. //                 
      当前求和为{this.state.count}
    14. //                 
    15. //             
    16. //         );
    17. //     }
    18. // }
    19.  
    20. function Demo() {
    21.     const [count, setCount] = React.useState(0)
    22.     const [name, setName] = React.useState('tom')
    23.  
    24.     function add() {
    25.         // setCount(count + 1)
    26.         setCount((count) => {
    27.             return count + 1
    28.         })
    29.     }
    30.  
    31.     function changeName() {
    32.         // setName('jack')
    33.         setName((name) => {
    34.             return 'jack'
    35.         })
    36.     }
    37.  
    38.     return (
    39.         
    40.             
      当前求和为{count}
    41.             
      我的名字是：{name}
    42.             
    43.             
    44.         
    45.     )
    46. }
    47.  
    48. export default Demo;

    4.扩展4_EffectHook 

     Demo.jsx

    1. import React, {Component} from 'react';
    2. import ReactDOM from 'react-dom';
    3.  
    4. // class Demo extends Component {
    5. //     state = {count: 0}
    6. //
    7. //     add = () => {
    8. //         this.setState(state => ({count: state.count + 1}))
    9. //     }
    10. //
    11. //     unmount = () => {
    12. //         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    13. //     }
    14. //
    15. //     componentDidMount() {
    16. //         this.timer = setInterval(() => {
    17. //             this.setState(state => ({count: state.count + 1}))
    18. //         }, 1000)
    19. //     }
    20. //
    21. //     componentWillUnmount() {
    22. //         clearInterval(this.timer)
    23. //     }
    24. //
    25. //     render() {
    26. //         return (
    27. //             
    28. //                 
      当前求和为{this.state.count}
    29. //                 
    30. //                 
    31. //             
    32. //         );
    33. //     }
    34. // }
    35.  
    36. function Demo() {
    37.     const [count, setCount] = React.useState(0)
    38.  
    39.     React.useEffect(() => {
    40.         let timer = setInterval(() => {
    41.             setCount(count => count + 1)
    42.         }, 1000)
    43.         return () => {
    44.             clearInterval(timer)
    45.         }
    46.     }, [])
    47.  
    48.     function add() {
    49.         setCount(count + 1)
    50.     }
    51.  
    52.     function unmount() {
    53.         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    54.     }
    55.  
    56.     return (
    57.         
    58.             
      当前求和为{count}
    59.             
    60.             
    61.         
    62.     )
    63. }
    64.  
    65. export default Demo;

    5.扩展5_RefHook

    Demo.jsx

    1. import React, {Component} from 'react';
    2. import ReactDOM from 'react-dom';
    3.  
    4. // class Demo extends Component {
    5. //     state = {count: 0}
    6. //
    7. //     myRef = React.createRef()
    8. //
    9. //     add = () => {
    10. //         this.setState(state => ({count: state.count + 1}))
    11. //     }
    12. //
    13. //     unmount = () => {
    14. //         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    15. //     }
    16. //
    17. //     show = () => {
    18. //         alert(this.myRef.current.value)
    19. //     }
    20. //
    21. //     componentDidMount() {
    22. //         this.timer = setInterval(() => {
    23. //             this.setState(state => ({count: state.count + 1}))
    24. //         }, 1000)
    25. //     }
    26. //
    27. //     componentWillUnmount() {
    28. //         clearInterval(this.timer)
    29. //     }
    30. //
    31. //     render() {
    32. //         return (
    33. //             
    34. //                 type="text" ref={this.myRef}/>
    35. //                 
      当前求和为{this.state.count}
    36. //                 
    37. //                 
    38. //                 
    39. //             
    40. //         );
    41. //     }
    42. // }
    43.  
    44. function Demo() {
    45.     const [count, setCount] = React.useState(0)
    46.     const myRef = React.useRef()
    47.  
    48.     React.useEffect(() => {
    49.         let timer = setInterval(() => {
    50.             setCount(count => count + 1)
    51.         }, 1000)
    52.         return () => {
    53.             clearInterval(timer)
    54.         }
    55.     }, [])
    56.  
    57.     function add() {
    58.         setCount(count + 1)
    59.     }
    60.  
    61.     function show() {
    62.         alert(myRef.current.value)
    63.     }
    64.  
    65.  
    66.     function unmount() {
    67.         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    68.     }
    69.  
    70.     return (
    71.         
    72.             type="text" ref={myRef}/>
    73.             
      当前求和为{count}
    74.             
    75.             
    76.             
    77.         
    78.     )
    79. }
    80.  
    81. export default Demo;

    6.扩展6_Fragment

    作用

    可以不用必须有一个真实的DOM根标签了

    Demo.jsx

    1. import React, {Component, Fragment} from 'react';
    2.  
    3. class Demo extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 type="text"/>
    8.                 type="text"/>
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default Demo;

    7.扩展7_Context

     理解

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

    使用

    注意

     Demo.jsx

    1. import React, {Component} from 'react';
    2. import './Demo.css'
    3.  
    4. const MyContext = React.createContext()
    5. const {Provider, Consumer} = MyContext
    6. export default class A extends Component {
    7.     state = {username: 'tom', age: 18}
    8.  
    9.     render() {
    10.         const {username, age} = this.state
    11.         return (
    12.             
      "parent">
    13.                 
      我是A组件
    14.                 
      我的用户名是：{username}
    15.                 
    16.                     
    17.                 
    18.             
    19.         );
    20.     }
    21. }
    22.  
    23. class B extends Component {
    24.     render() {
    25.         return (
    26.             
      "child">
    27.                 
      我是B组件
    28.                 
    29.             
    30.         );
    31.     }
    32. }
    33.  
    34.  
    35. // class C extends Component {
    36. //     static contextType = MyContext
    37. //
    38. //     render() {
    39. //         const {username, age} = this.context
    40. //         return (
    41. //             
      "grand">
    42. //                 
      我是C组件
    43. //                 
      我从A组件接收到的用户名：{username},年龄是{age}
    44. //             
    45. //         );
    46. //     }
    47. // }
    48.  
    49. function C() {
    50.     return (
    51.         
      "grand">
    52.             
      我是C组件
    53.             
      我从A组件接收到的用户名：
    54.                 
    55.                     {
    56.                         value => {
    57.                             return `${value.username},年龄是${value.age}`
    58.                         }
    59.                     }
    60.                 
    61.             
    62.  
    63.         
    64.     )
    65. }

    Demo.css

    1. .parent {
    2.     width: 500px;
    3.     background-color: orange;
    4.     padding: 8px;
    5. }
    6.  
    7. .child {
    8.     width: 100%;
    9.     background-color: skyblue;
    10.     padding: 8px;
    11. }
    12.  
    13. .grand {
    14.     width: 100%;
    15.     background-color: gray;
    16.     padding: 8px;
    17. }

    8.扩展8_PureComponent

    组件优化

    原因

    解决

    办法一：Demo.jsx

    1. import React, {Component} from 'react';
    2. import './Demo.css'
    3.  
    4. class Parent extends Component {
    5.     state = {carName: "奔驰c36"}
    6.  
    7.     changeCar = () => {
    8.         this.setState({})
    9.     }
    10.  
    11.     shouldComponentUpdate(nextProps, nextState, nextContext) {
    12.         console.log(this.props, this.state, 'Parent')
    13.         console.log(nextProps, nextState, 'Parent')
    14.         return !this.state.carName === nextState.carName
    15.     }
    16.  
    17.     render() {
    18.         console.log('Parent--render')
    19.         const {carName} = this.state
    20.         return (
    21.             
      "parent">
    22.                 
      我是Parent组件
    23.                 我的车名字是：{carName}

    24.                 
    25.                 
    26.             
    27.         );
    28.     }
    29. }
    30.  
    31. class Child extends Component {
    32.     shouldComponentUpdate(nextProps, nextState, nextContext) {
    33.         console.log(this.props, this.state, 'Child')
    34.         console.log(nextState, nextState, 'Child')
    35.         return !this.props.carName === nextState.carName
    36.     }
    37.  
    38.     render() {
    39.         console.log('Child--render')
    40.         return (
    41.             
      "child">
    42.                 
      我是Child组件
    43.                 我接到的车是：{this.props.carName}
    44.             
    45.         );
    46.     }
    47. }
    48.  
    49. export default Parent;

     Demo.css

    1. .parent {
    2.     background-color: orange;
    3.     padding: 10px;
    4. }
    5.  
    6. .child {
    7.     background-color: gray;
    8.     margin-top: 30px;
    9.     padding: 10px;
    10. }

    办法二：Demo.jsx

    1. import React, {PureComponent} from 'react';
    2. import './Demo.css'
    3.  
    4. class Parent extends PureComponent {
    5.     state = {carName: "奔驰c36", stus: ['小张', '小李', '小王']}
    6.  
    7.     addStu = () => {
    8.         // const {stus} = this.state
    9.         // stus.unshift('小刘')
    10.         // this.setState({stus: stus})
    11.  
    12.         const {stus} = this.state
    13.         this.setState({stus: ['小刘', ...stus]})
    14.     }
    15.  
    16.     changeCar = () => {
    17.         // this.setState({carName: "迈巴赫"})
    18.  
    19.         const obj = this.state
    20.         obj.carName = '迈巴赫'
    21.         console.log(obj === this.state)
    22.         this.setState(obj)
    23.     }
    24.  
    25.     // shouldComponentUpdate(nextProps, nextState, nextContext) {
    26.     //     console.log(this.props, this.state, 'Parent')
    27.     //     console.log(nextProps, nextState, 'Parent')
    28.     //     return !this.state.carName === nextState.carName
    29.     // }
    30.  
    31.     render() {
    32.         console.log('Parent--render')
    33.         const {carName} = this.state
    34.         return (
    35.             
      "parent">
    36.                 
      我是Parent组件
    37.                 {this.state.stus} 
    38.                 我的车名字是：{carName}

    39.                 
    40.                 
    41.                 "奥拓">
    42.             
    43.         );
    44.     }
    45. }
    46.  
    47. class Child extends PureComponent {
    48.     // shouldComponentUpdate(nextProps, nextState, nextContext) {
    49.     //     console.log(this.props, this.state, 'Child')
    50.     //     console.log(nextState, nextState, 'Child')
    51.     //     return !this.props.carName === nextState.carName
    52.     // }
    53.  
    54.     render() {
    55.         console.log('Child--render')
    56.         return (
    57.             
      "child">
    58.                 
      我是Child组件
    59.                 我接到的车是：{this.props.carName}
    60.             
    61.         );
    62.     }
    63. }
    64.  
    65. export default Parent;

    9.扩展9_renderProps

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

    children props

    render props

    Demo.jsx

    1. import React, {Component} from 'react';
    2. import './Demo.css'
    3.  
    4. class Parent extends Component {
    5.     render() {
    6.         return (
    7.             
      "parent">
    8.                 
      我是Parent组件
    9.                  }>
    10.             
    11.         );
    12.     }
    13. }
    14.  
    15. class A extends Component {
    16.     state = {name: 'tom'}
    17.  
    18.     render() {
    19.         const {name} = this.state
    20.         return (
    21.             
      "a">
    22.                 
      我是A组件
    23.                 {this.props.render(name)}
    24.             
    25.         )
    26.     }
    27. }
    28.  
    29.  
    30. class B extends Component {
    31.     render() {
    32.         return (
    33.             
      "b">
    34.                 
      我是B组件,{this.props.name}
    35.             
    36.         )
    37.     }
    38. }
    39.  
    40. export default Parent;

     Demo.css

    1. .parent {
    2.     background-color: orange;
    3.     padding: 10px;
    4. }
    5.  
    6. .a {
    7.     background-color: gray;
    8.     margin-top: 30px;
    9.     padding: 10px;
    10. }
    11.  
    12. .b {
    13.     background-color: skyblue;
    14.     margin-top: 30px;
    15.     padding: 10px;
    16. }

    10.扩展10_ErrorBoundary

    理解:

    特点:

    使用方式:

    1. // 生命周期函数，一旦后代组件报错，就会触发
    2. static getDerivedStateFromError(error) {
    3.     console.log(error);
    4.     // 在render之前触发
    5.     // 返回新的state
    6.     return {
    7.         hasError: true,
    8.     };
    9. }
    10.  
    11. componentDidCatch(error, info) {
    12.     // 统计页面的错误。发送请求发送到后台去
    13.     console.log(error, info);
    14. }

    Parent.jsx

    1. import React, {Component} from 'react';
    2. import Child from "./Child";
    3.  
    4. class Parent extends Component {
    5.     state = {
    6.         hasError: ''
    7.     }
    8.  
    9.     //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
    10.     static getDerivedStateFromError(error) {
    11.         console.log(error)
    12.         return {hasError: error}
    13.     }
    14.  
    15.     componentDidCatch(error, errorInfo) {
    16.         console.log('渲染组件时出错')
    17.     }
    18.  
    19.     render() {
    20.         return (
    21.             
    22.                 
      我是Parent组件
    23.                 {this.state.hasError ? 
      当前网络不稳定，稍后再试
       : }
    24.             
    25.         );
    26.     }
    27. }
    28.  
    29. export default Parent;

    Child.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Child extends Component {
    4.     state = {
    5.         // users: [
    6.         //     {id: '001', name: 'tom', age: 18},
    7.         //     {id: '002', name: 'jack', age: 19},
    8.         //     {id: '003', name: 'peiqi', age: 20},
    9.         // ]
    10.  
    11.         users: 'abc'
    12.     }
    13.  
    14.     render() {
    15.         return (
    16.             
    17.                 
      我是Child组件
    18.                 {
    19.                     this.state.users.map((userObj) => {
    20.                         return 
      {userObj.name}-----{userObj.age}
    21.                     })
    22.                 }
    23.             
    24.         );
    25.     }
    26. }
    27.  
    28. export default Child;

    11.组件通信方式总结

    组件间的关系：

    几种通信方式：

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

     比较好的搭配方式：

  • 相关阅读:
    性能测试分类
    Scalable Object Detection using Deep Neural Networks
    vs中集成vcpkg
    【Flink入门修炼】1-4 Flink 核心概念与架构
    搭建游戏要选什么样的服务器？
    ROS三种通信方式之话题通信
    DTK Barcode Recognition SDK Crack
    前后端分离项目(九):实现"添加"功能(后端接口)
    nginx安装与使用（入门）
    Qt：多语言支持，构建全面应用程序“
  • 原文地址：https://blog.csdn.net/qq_56444564/article/details/134114951