return (
<>
当前求和为{count}
卸载组件
</>
)
}
- 总结
-
useEffect传入的第一个值:这个函数,有可能相当于
componentDidMount
、componentDidUpdate
、componentWillUnmount
(甚至有可能同时相当于componentDidMount和componentDidUpdate!
) -
useEffect传入的第二个值:这个[ ],方括号里面是啥(state),它就监测啥(state)
-
useEffect里的参数:
①同时相当于componentDidMount/componentDidUpdate
:useEffect只传一个参数useEffect( ()=>{} ) ----------> 它等于谁都监测,组件一挂载和任何状态变动,都会回调那个作为参数的函数
②相当于componentDidMount
:useEffect( ()=>{} , [] ) ----------> 第二个参数,[ ]里什么都不写 --------> 相当于谁都不监测
③相当于componentWillUnmout
: useEffect( ()=>{ return ()=>{} } ) --------> 第一个参数的返回值的这个函数相当于componentWillUnmout
==========================================================================================
用的时候才加载,一般是路由组件进行懒加载
如果不用路由懒加载,页面在第一次进入的时候,就请求了所有组件的数据,如果组件过多,过多的请求这就没有必要了,应该是用户按哪个链接再请求哪个组件
-
通过React的lazy函数配合import()函数动态加载路由组件【路由组件代码会被分开打包】
-
通过指定在加载得到路由打包文件前显示一个自定义loading界面
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 (
React Router Demo
{/* 在React中靠路由链接实现切换组件–编写路由链接 */}
About
Home
<Suspense fallback={}>
{/* 注册路由 */}
)
}
}
=============================================================================
文档碎片
可以不用必须有一个真实的DOM根标签了
import React, { Component,Fragment } from ‘react’
export default class Demo extends Component {
render() {
return (
)
}
}
============================================================================
上下文
一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
- 创建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插件
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 (
我是A组件
我的用户名是:{username}
)
}
}
class B extends Component {
render() {
return (
我是B组件
)
}
}
/* class C extends Component {
//声明接收context
static contextType = MyContext
render() {
const {username,age} = this.context
return (
我是C组件
我从A组件接收到的用户名:{username},年龄是{age}
)
}
} */
function C(){
return (
我是C组件
我从A组件接收到的用户名:
{value => ${value.username},年龄是${value.age}
}
)
}
=========================================================================
-
只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低
-
只当前组件重新render(), 就会自动重新render子组件,纵使子组件没有用到父组件的任何数据 ==> 效率低
只有当组件的state或props数据发生改变时才重新render()
Component中的shouldComponentUpdate()总是返回true(阀门总是打开的)
4.1 办法一:重写shouldComponentUpdate()方法
比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
shouldComponentUpdate(nextProps,nextState){
// console.log(this.props,this.state); //目前的props和state
// console.log(nextProps,nextState); //接下要变化的目标props,目标state
return !this.state.carName === nextState.carName
}
4.2 办法二: 使用PureComponent
PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
注意
-
只是进行state和props数据的
浅比较
, 如果只是数据对象内部数据变了, 返回false -
不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent
来优化
import React, { PureComponent } from ‘react’
import ‘./index.css’
export default class Parent extends PureComponent {
state = {carName:“奔驰c36”,stus:[‘小张’,‘小李’,‘小王’]}
addStu = ()=>{
const {stus} = this.state
this.setState({stus:[‘小刘’,…stus]})
}
changeCar = ()=>{
this.setState({carName:‘迈巴赫’})
render() {
console.log(‘Parent—render’);
const {carName} = this.state
return (
我是Parent组件
{this.state.stus}
我的车名字是:{carName}
点我换车
添加一个小刘
)
}
}
class Child extends PureComponent {
render() {
console.log(‘Child—render’);
return (
我是Child组件
我接到的车是:{this.props.carName}
)
}
}
=========================================================================
错误边界(Error boundary):用来捕获后代组件错误,同时将报错的组件替换渲染出备用页面
只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
getDerivedStateFromError配合componentDidCatch
// 生命周期函数,一旦后台组件报错,就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}
componentDidCatch(error, info) {
// 统计页面的错误。发送请求发送到后台去
console.log(error, info);
}
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 (
我是Parent组件
{this.state.hasError ?
当前网络不稳定,稍后再试
: })
}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
员进行bug的解决’);
}
render() {
return (
我是Parent组件
{this.state.hasError ?
当前网络不稳定,稍后再试
: })
}
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-Mtoj3uoA-1715588088999)]
[外链图片转存中…(img-JvUo7Cg2-1715588088999)]
[外链图片转存中…(img-kKK3ysK3-1715588088999)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!