为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第13天...

【九月打卡】第13天 React零基础入门到实战,完成企业级项目简书网站开发 第四讲

2022.09.19 22:55 31浏览

课程章节: React高级内容

主讲老师: Dell

课程内容:

今天学习的内容包括:

propTypes 没有传参的话不会做检测 不生效

PropTypes.isRequired 必须传递 不然警告 默认值可以解决警告

defaultProps 属性默认值

虚拟dom本质上是一个js对象,按照一定规则生成的js对象

课程收获:

4.1 心得:

react-devtools安装步骤:
1.首先打开官网:https://github.com/facebook/react-devtools
2. 进去v3分支,地址:https://github.com/facebook/react-devtools/tree/v3,download ZIP格式
3. 解压,进入到react-devtools-3目录,cnpm i安装依赖
4. 再进入到react-devtools-3\shells\chrome切换到chrome目录下,运行node build.js,当前目录下会生成build目录 这个build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包
5. 打开谷歌浏览器,网址输入chrome://extensions/, 选择react-detools-3目录下的shells->chrome中build目录中的unpacked即可

4.2 心得:

子组件参数类型定义 propTypes

import PropTypes from 'prop-types'; // 脚手架自带的包

TodoItem.propTypes = {

    test: PropTypes.string.isRequired, // 字符串类型,必传

    deleteItem: PropTypes.func, // 函数类型

    index: PropTypes.number, // 数字类型

    content: PropTypes.arrayOf(PropTypes.number, PropTypes.string), // 数字、字符串类型

}

子组件参数默认值 defaultTypes

TodoItem.defaultTypes = {

    test: '填了默认值,类型就不会报错了'

}

propTypes 可以限制父组件给子组件传值的类型

对于组件接收的外部传来的props的类型做校验

eg.TodoItem.propTypes = {

content: PropTypes.string //content类型必须是string类型

}

PropTypes.isRequired 必须传递 否则会警告 可以定义默认值解决报错问题

eg.TodoItem.defaultProps = {

test: 'hello word' //test的默认值是hello world

}

PropTypes.instanceof(Message) //判断接收的是否是Message实例

content: PropTypes.arrayOf(propTypes.number,PropTypes.string) //content是number或者string

4.3 心得:

Test子组件从父组件接收一个content

content是父组件里的this.state.inputValue

当我们输入内容时,this.state.inputValue会发生变化

子组件里的conten会发生变化,所以子组件render()函数会被重新执行,页面会重新渲染

当父组件里的render()函数被运行时,它的子组件的render会被重新运行一次

4.4 心得:

方案一:

state 数据

jsx模板

数据+模板 结合,生成真实的DOM来显示

state发生改变

数据+模板 结合,生成真实的DOM,替换原始的DOM

缺陷:

第一次生成了一个完整的DOM片段

第二次生成了一个完整的DOM片段

第二次的DOM替换第一次的DOM,非常耗性能

方案二:

state 数据

jsx模板

数据+模板 结合,生成真实的DOM,来显示

state 发生改变

数据+模板 结合,生成真实的DOM,并不直接替换原始的DOM

新的DOM和原始的DOM 作比对,找差异

找出input框发生了变化

只用新的DOM中的input元素,替换掉老的DOM中的input元素

缺陷:性能的提升并不明显

方案三(虚拟DOM方案):减少了真实dom的创建和真实dom的对比

state 数据

jsx模板

数据+模板 结合,生成真实的DOM,来显示

hello world

生成虚拟DOM(虚拟DOM就是一个对象,用它来描述真实DOM)(损耗了一点点性能)

[‘div’,{id: ‘abc’},[‘span’,{},‘hello world’]]

state 发生变化

数据+模板 生成新的虚拟DOM(极大地提升了性能)

[‘div’,{id: ‘abc’},[‘span’,{},‘bye bye’]]

比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是spanzhongdeneir(比较两个js对象,极大地提升了性能)

直接操作DOM,改变span中的内容

4.5 心得:

JSX -> createElement -> 虚拟DIM(JS对象)-> 真实的DOM

优点:

性能提升了

它使得跨端应用得以实现。React Native

4.6 心得:

虚拟DOM与Diff算法

一、虚拟DOM介绍

虚拟DOM:实际上就是一个JS对象,用来描述真实dom

hello world

虚拟DOM包含:1.节点名称 2。节点属性 3.节点的children

['div',{id: 'abc'【属性】},['span',{},'hello world']]

虚拟DOM的优点:1.性能提升 2.实现跨端应用

优化性能的原因:真实DOM的比较很耗性能,但虚拟DOM的比较实质上是对象的比较,消耗小

实现跨端应用的原因:虚拟dom不管是在浏览器里还是源生应用里都可以被识别(而真实DOM不能被源生的应用是被)

从虚拟DOM到真实DOM的步骤

JSX -> (通过createElement方法) 虚拟D0M(JS对象)-> 真实的DOM

 return <div>item</div> === return React.createElement('div',{},'item');

因此JSX可以简化代码

二、虚拟DOM的Diff算法

Diff算法(difference):虚拟dom(或JS对象)的比对方式

实现逻辑:同层比对

使用key值的重要性:极大提升了虚拟dom比对的性能【但必须保证key前后是相同的才能建立关系

4.7 心得:

获取DOM:

  1. 通过e.target访问

  2. 使用ref: ref能够帮助我们直接获取DOM元素,但尽量不要使用

  3. ref和setState一起用时可能出现问题,DOM获取并不及时,原因是setState是异步的,解决方法是将获取DOM的语句放在setState第二个参数的函数里

4.8 心得:

React 生命周期

  • componentWillMount 在组件即将被挂在到页面执行

  • render 页面挂载执行

  • componentDidMount 组件被挂载完成后执行

  • shouldComponentUpdate 组件更新前执行,需要返回Boolean值

  • componentWillUpdate 组件更新前执行,但在 shouldComponentUpdate 后执行,并且返回true,才会执行

  • componentDidUpdate 组件更新完成后执行

  • conponentWillReceiveProps 当一个组件从父组件接收了参数,只要父组件的render函数执行了,子组件的这个生命函数就会执行。如果这组件第一次存在父组件中,才会执行

  • componentWilUnmount 组件被移除时执行

4.9 心得:

一、React生命周期函数的使用场景:

shouldComponentUpdate:React性能优化(见下文二)

componentDidMount:发送ajax请求【放在render里会被反复执行,是不合理的】(见下文三)

二、React性能优化的方式

1、周期函数:shouldComponentUpdate(nextProps,nextState),提高组件性能

父组件数据发生变化时,子组件也会刷新,但是很多时候的刷新是不必要的,可以在子组件生命周期函数中加以判断,只有特定条件下子组件才更新

shouldComponentUpdate(nextProps, nextState){
    if(判断条件) {//如nextProps.content !== this.props.content
        return true
    }else{
        return false
    }
}

2、作用域的修改:放在constructor里面。比如:this.handleClick.bind(this),只会执行一次,避免子组件无谓渲染

3、react 的底层setState,内置性能提升机制,异步函数,把多次数据改变结合一一次来做,降低虚拟DOM比对频率
4、react底层用的是虚拟DOM的概念,同层比对,还有key 值这样的概念,提升虚拟dom 比对速度

三、react中发送ajax请求的方式

react里面没有封装ajax函数,可以安装第三方模块来进行ajax请求;
在项目目录下安装axios 运行:yarn add axios
代码中:

import axios from 'axios';
componentDidMount() {
axios.get('/api/todolist')
.then((()=>{alert('succ')})
.catch(()=>{alert('error')})
}

4.10 心得:

axios安装使用:

npm install axios
import axios from 'axios'
componentDidMount() {
axios.get('./api/todolist')
.then((res) => {
this.setState(() => ({
list: [...res.data]
}))
})
.catch(() => {console.log("erro")})
}

接口地址 :http://localhost.charlesproxy.com:3000/api/getTodoList
页面地址 : http://localhost.charlesproxy.com:3000/
charls map local:
protocal:http
host:localhost.charlesproxy.com
port:3000
path:/api/getTodoList

4.11 心得:

<Fragment>占位符不会渲染成任何元素,帮助解决多个DOM标签问题

css样式引入 improt “./main.css”

4.12 心得:

animation的使用

.show {
animation: show_item 2s ease-in forwards;
}
//forwards保留这个动作停在最后的状态
@keyframes show_item {
0% {
opacity: 0;
color: red;
}
50% {
opacity: 0.5;
color: yellow;
}
100% {
opacity: 1;
color: green;
}
}

4.13 心得:

第三方库react-transition-group的使用:

安装:react-transition-group主要是解决复杂的css问题:yarn add react-transition-group

引入:CSSTransition import {CSSTransition} from ‘react-transition-group’

使用:无需手动进行class的改变,只需在需要进行效果改变的组件外嵌套CSSTransition 组件即可

CSSTransition有如下属性【提供了很多钩子函数(钩子函数=生命执行函数,即在某一时刻会自动执行的函数)】
(1)in
true: 入场动画
false:出场动画
(2)onmountOnExit
动画完成之后元素隐藏

(3)onEntered={(el)=>{}} 钩子函数,在
入场动画结束时触发,el表示当前的
dom元素
(4)appear = {true}第一次显示也要执
行动画 对应的类
名 .fade-appear .fade-appear-active

用法:
import {CSSTransition} from 'react-transition-group’
in={this.state.show(true)} — 判断是否启动动画
timeout={1000} ------动画持续时间;以秒数为时间
unmountOnExit ---- 动画完成之后Dom元素被隐藏
onEntered={(el-这个el代表标签包裹里面的div)=>{el.style.color=‘blue’}} ---- 动画执行完成之后执行的钩子函数
apper = true ---- 页面初始加载出现该函数
CSS设置:
.fade-appear{} ----- 入场动画在初始页面加载的时候执行
.fade-enter-apper ----- 入场动画执行的第二个瞬间在页面初始加载的时候
classNames=‘fade’ -----fade是动画类名的前缀
CSS设置:
.fade-enter{} -----入场动画执行的第一个时刻
.fade-enter-actve{} ---- 入场动画执行的第二个瞬间,会存在该样式,一直到入场动画执行完为止
.fade-enter-done{} ----当整个入场动画执行完成之后,执行该样式
.fade-exit{} ---- 出场动画执行的第一个时刻
.fade-exit-active{} ---- 和入场动画类似,第二个时刻
.fade-exit-done{} ---- 出场动画执行完成之后,执行该样式

4.14 心得:

如果要使用Transition group的话,最外层要放Transition group,里面还要放CSSTransition

图片描述

图片描述

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
学生
手记
粉丝
2
获赞与收藏
2

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

145篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消