React扩展

转载

KaiSarH 2022-03-10 14:18:37 博主文章分类：React

文章标签 数据 css ide 文章分类 代码人生

1. setState更新状态的2种写法

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

stateChange为状态改变对象(该对象可以体现出状态的更改)
callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

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

updater为返回stateChange对象的函数。
updater可以接收到state和props。
callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

总结:

对象式的setState是函数式的setState的简写方式(语法糖)
使用原则：

如果新状态不依赖于原状态 → 使用对象方式
如果新状态依赖于原状态 → 使用函数方式
如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取

import React, {Component} from 'react'

export default class Demo extends Component {

  state = {count: 0}

  add = () => {
    //对象式的setState
    /* //1.获取原来的count值
    const {count} = this.state
    //2.更新状态
    this.setState({count:count+1},()=>{
      console.log(this.state.count);
    })
    //console.log('12行的输出',this.state.count); //0 */

    //函数式的setState
    this.setState(state => ({count: state.count + 1}))
  }

  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}

2. lazyLoad

路由组件的lazyLoad

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

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
  <Switch>
    <Route path="/xxx" component={Xxxx}/>
      <Redirect to="/login"/>
  </Switch>
</Suspense>

—About
—index.jsx
—Home
—index.jsx
—Loading
—index.jsx
index.jsx

About/index.jsx
import React, {Component} from 'react' export default class About extends Component { render() { return ( <h2>我是About组件</h2> ) } }
Home/index.jsx
import React, {Component} from 'react' export default class Home extends Component { render() { return ( <h2>我是Home组件</h2> ) } }
Loading/index.jsx
import React, {Component} from 'react' export default class Loading extends Component { render() { return ( <div> <h1 style={{backgroundColor: 'gray', color: 'orange'}}>Loading....</h1> </div> ) } }
index.jsx
import React, {Component, lazy, Suspense} from 'react' import {NavLink, Route} from 'react-router-dom' // import Home from './Home' // import About from './About' import Loading from './Loading' const Home = lazy(() => import('./Home')) const About = lazy(() => import('./About')) export default class Demo extends Component { render() { return ( <div> <div className="row"> <div className="col-xs-offset-2 col-xs-8"> <div className="page-header"><h2>React Router Demo</h2></div> </div> </div> <div className="row"> <div className="col-xs-2 col-xs-offset-2"> <div className="list-group"> {/* 在React中靠路由链接实现切换组件--编写路由链接 */} <NavLink className="list-group-item" to="/about">About</NavLink> <NavLink className="list-group-item" to="/home">Home</NavLink> </div> </div> <div className="col-xs-6"> <div className="panel"> <div className="panel-body"> <Suspense fallback={<Loading/>}> {/* 注册路由 */} <Route path="/about" component={About}/> <Route path="/home" component={Home}/> </Suspense> </div> </div> </div> </div> </div> ) } }

3. Hooks

1. React Hook/Hooks是什么?

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

2. 三个常用的Hook

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

3. State Hook

State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法: const [xxx, setXxx] = React.useState(initValue)
useState()说明:

参数: 第一次初始化指定的值在内部作缓存
返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数

setXxx()2种写法:

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

4. Effect Hook

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

发ajax请求数据获取
设置订阅 / 启动定时器
手动更改真实DOM

语法和说明:
useEffect(() => { // 在此可以执行任何带副作用操作 return () => { // 在组件卸载前执行 // 在此做一些收尾工作, 比如清除定时器/取消订阅等 } }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
可以把 useEffect Hook 看做如下三个函数的组合

componentDidMount()
componentDidUpdate()
componentWillUnmount()

5. Ref Hook

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

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

使用

<Fragment><Fragment>
<></>

作用

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

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

export default class Demo extends Component {
  render() {
    return (
      <Fragment key={1}>
        <input type="text"/>
        <input type="text"/>
      </Fragment>
    )
  }
}

5. Context

理解

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

使用

创建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>

注意

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

index.css
index.jsx

index.css
.parent { width: 500px; background-color: orange; padding: 8px; } .child { width: 100%; background-color: skyblue; padding: 8px; } .grand { width: 100%; background-color: gray; padding: 8px; }
index.jsx
import React, {Component} from 'react' import './index.css' //创建Context对象 const MyContext = React.createContext() const {Provider, Consumer} = MyContext export default class A 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. 组件优化

Component的2个问题

只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

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

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1:

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

办法2:

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

注意:

只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false
不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

index.css
index.jsx

index.css
.parent { background-color: orange; padding: 10px; } .child { background-color: gray; margin-top: 30px; padding: 10px; }
index.jsx
import React, {PureComponent} from 'react' import './index.css' export default class Parent extends PureComponent { state = {carName: "奔驰c36", stus: ['小张', '小李', '小王']} addStu = () => { /* const {stus} = this.state stus.unshift('小刘') this.setState({stus}) */ const {stus} = this.state this.setState({stus: ['小刘', ...stus]}) } changeCar = () => { //this.setState({carName:'迈巴赫'}) const obj = this.state obj.carName = '迈巴赫' console.log(obj === this.state); this.setState(obj) } /* shouldComponentUpdate(nextProps,nextState){ // console.log(this.props,this.state); //目前的props和state // console.log(nextProps,nextState); //接下要变化的目标props，目标state return !this.state.carName === nextState.carName } */ render() { console.log('Parent---render'); const {carName} = this.state return ( <div className="parent"> <h3>我是Parent组件</h3> {this.state.stus}  <span>我的车名字是：{carName}</span><br/> <button onClick={this.changeCar}>点我换车</button> <button onClick={this.addStu}>添加一个小刘</button> <Child carName="奥拓"/> </div> ) } } class Child extends PureComponent { /* shouldComponentUpdate(nextProps,nextState){ console.log(this.props,this.state); //目前的props和state console.log(nextProps,nextState); //接下要变化的目标props，目标state return !this.props.carName === nextProps.carName } */ render() { console.log('Child---render'); return ( <div className="child"> <h3>我是Child组件</h3> <span>我接到的车是：{this.props.carName}</span> </div> ) } }

7. render props

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

Vue中: 
  使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
  使用children props: 通过组件标签体传入结构
  使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

index.css
index.jsx

index.css
.parent { background-color: orange; padding: 10px; } .a { background-color: gray; margin-top: 30px; padding: 10px; } .b { background-color: skyblue; margin-top: 30px; padding: 10px; }
index.jsx
import React, {Component} from 'react' import './index.css' import C from '../1_setState' export default class Parent extends Component { render() { return ( <div className="parent"> <h3>我是Parent组件</h3> <A render={(name) => <C 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> ) } }

8. 错误边界

理解：

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

特点：

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

使用方式：

getDerivedStateFromError配合componentDidCatch

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

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

Child.jsx
Parent.jsx

Child.jsx
import React, {Component} from 'react' export default class Child extends Component { state = { users: [ {id: '001', name: 'tom', age: 18}, {id: '002', name: 'jack', age: 19}, {id: '003', name: 'peiqi', age: 20}, ] // users:'abc' } render() { return ( <div> <h2>我是Child组件</h2> { this.state.users.map((userObj) => { return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4> }) } </div> ) } }
Parent.jsx
import React, {Component} from 'react' import Child from './Child' export default class Parent extends Component { state = { hasError: '' //用于标识子组件是否产生错误 } //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息 static getDerivedStateFromError(error) { console.log('@@@', error); return {hasError: error} } componentDidCatch() { console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决'); } render() { return ( <div> <h2>我是Parent组件</h2> {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child/>} </div> ) } }

9. 组件通信方式总结

组件间的关系：

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

几种通信方式：

props：

children props
render props

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

比较好的搭配方式：

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

上一篇：HTML：常用代码(自用)

下一篇：Vue源码：mustache模板引擎学习

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

React扩展

React扩展

1. setState更新状态的2种写法

2. lazyLoad

路由组件的lazyLoad

3. Hooks

1. React Hook/Hooks是什么?

2. 三个常用的Hook

3. State Hook

4. Effect Hook

5. Ref Hook

4. Fragment

使用

作用

5. Context

理解

使用

注意

6. 组件优化

Component的2个问题

效率高的做法

原因

解决

7. render props

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

children props

render props

8. 错误边界

理解：

特点：

使用方式：

9. 组件通信方式总结

组件间的关系：

几种通信方式：

比较好的搭配方式：

51CTO博客