可以看帖子的网站,电商网站的功能有哪些,电脑安装不了wordpress,移动互联网开发考研方向文章目录 2.6. 组件的生命周期2.6.1. 效果2.6.2. 理解2.6.3. 生命周期流程图(旧)2.6.4. 生命周期流程图(新)2.6.5. 重要的勾子2.6.6. 即将废弃的勾子2.6.7 getSnapshotBeforeUpdate 2.7. 虚拟DOM与DOM Diffing算法2.7.1. 效果2.7.2. 基本原理图 2.6. 组件的生命周期
2.6.1. 效… 文章目录 2.6. 组件的生命周期2.6.1. 效果2.6.2. 理解2.6.3. 生命周期流程图(旧)2.6.4. 生命周期流程图(新)2.6.5. 重要的勾子2.6.6. 即将废弃的勾子2.6.7 getSnapshotBeforeUpdate 2.7. 虚拟DOM与DOM Diffing算法2.7.1. 效果2.7.2. 基本原理图 2.6. 组件的生命周期
2.6.1. 效果 需求:定义组件实现以下功能 让指定的文本做显示 / 隐藏的渐变动画从完全可见到彻底消失耗时2S点击“不活了”按钮从界面中卸载组件 !-- 准备好一个“容器” --
div idtest/div
!-- 引入三个库 --
script typetext/babelclass Demo extends React.Component{state {opacity:1}death (){//卸载组件ReactDOM.unmountComponentAtNode(document.getElementById(test))}//组件挂完毕componentDidMount(){console.log(componentDidMount);this.timer setInterval(() {//获取原状态let {opacity} this.state//减小0.1opacity - 0.1if(opacity 0) opacity 1//设置新的透明度this.setState({opacity})}, 200);}//组件将要卸载componentWillUnmount(){//清除定时器clearInterval(this.timer)}//初始化渲染、状态更新之后render(){console.log(render);return(divh2 style{{opacity:this.state.opacity}}React学不会怎么办/h2button onClick{this.death}不活了/button/div)}}//渲染组件到页面ReactDOM.render(Demo a1 b2/,document.getElementById(test))
/script2.6.2. 理解
1.组件从创建到死亡它会经历一些特定的阶段。 2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 3.我们在定义组件时会在特定的生命周期回调函数中做特定的工作。
2.6.3. 生命周期流程图(旧)
生命周期的三个阶段旧
初始化阶段: 由ReactDOM.render()触发—初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount()更新阶段: 由组件内部this.setSate()或父组件重新render触发 1.shouldComponentUpdate() 2.componentWillUpdate() 3.render() 4.componentDidUpdate()卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1.componentWillUnmount()
!-- 准备好一个“容器” --
div idtest/div
!-- 引入三个库 --
script typetext/babel/* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1. constructor()2. componentWillMount()3. render()4. componentDidMount() 常用一般在这个钩子中做一些初始化的事例如开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件render触发1. shouldComponentUpdate()2. componentWillUpdate()3. render() 必须使用的一个4. componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1. componentWillUnmount() 常用一般在这个钩子中做一些收尾的事例如关闭定时器、取消订阅消息*/class Demo extends React.Component{constructor(props){console.log(Count---construtor);super(props)//初始化状态this.state {count:0}}//加按钮的回调add () {//获取原状态const {count} this.state;this.setState({count:count1})}//卸载组件按钮的回调dath (){React.unmountComponentAtNode(document.getElementById(test))}//强制更新的按钮force (){this.forceUpdate()}//组件将要挂在的钩子函数componentWillMount(){console.log(Count---componentWillMount);}//组件挂在完毕componentDidMount(){console.log(Count---componentDidMount);}//组件将要卸载的钩子componentWillUnmount(){console.log(Count---componentWillUnmount);}//控制组件更新的阀门,默认为true必须要有返回值shouldComponentUpdate(){console.log(Count---shouldComponentUpdate);return true}//组件将要更新的钩子componentWillUpdate(){console.log(Count---componentWillUpdate);}//组件更新完毕的钩子componentDidUpdate(){console.log(Count---componentDidUpdate);}render(){console.log(Count---render);const {count} this.statereturn(divh2当前求和为{count}/h2button onClick{this.add}点我1/buttonbutton onClick{this.death}卸载组件/buttonbutton onClick{this.force}不更改任何状态中的数据强制更新一下/button/div)} }//父组件Aclass A extends React.Component{//初始化状态state {carName:奔驰}changeCar (){this.setState({carName:奥拓})}render(){return(divdiv我是A组件/divbutton onClick{this.changeCar}换车/buttonB carName{this.state.carName}//div)}}//子组件Bclass B extends React.Component{//组件将要接收新的props的钩子componentWillReceiveProps(props){console.log(B---componentWillReceiveProps,props);}//控制组件更新的“阀门”shouldComponentUpdate(){console.log(B---shouldComponentUpdate);return true}//组件将要更新的钩子componentWillUpdate(){console.log(B---componentWillUpdate);}//组件更新完毕的钩子componentDidUpdate(){console.log(B---componentDidUpdate);}render(){console.log(B---render);return(div我是B组件接收到的车是:{this.props.carName}/div)}}//渲染组件到页面ReactDOM.render(Demo a1 b2/,document.getElementById(test))
/script2.6.4. 生命周期流程图(新)
生命周期的三个阶段新
初始化阶段: 由ReactDOM.render()触发—初次渲染 1.constructor() 2.getDerivedStateFromProps 3.render() 4.componentDidMount()更新阶段: 由组件内部this.setSate()或父组件重新render触发 1.getDerivedStateFromProps 2.shouldComponentUpdate() 3.render() 4.getSnapshotBeforeUpdate 5.componentDidUpdate()卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1.componentWillUnmount()
!-- 准备好一个“容器” --
div idtest/div
!-- 引入三个库 --
script typetext/babel/* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染1. constructor()2. getDerivedStateFromProps 3. render()4. componentDidMount() 常用一般在这个钩子中做一些初始化的事例如开启定时器、发送网络请求、订阅消息2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发1. getDerivedStateFromProps2. shouldComponentUpdate()3. render()4. getSnapshotBeforeUpdate5. componentDidUpdate()3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发1. componentWillUnmount() 常用一般在这个钩子中做一些收尾的事例如关闭定时器、取消订阅消息*/class Demo extends React.Component{//构造器constructor(props){console.log(Count---constructor);super(props)//初始化状态this.state {count:0}}//加1按钮的回调add (){//获取原状态const {count} this.state//更新状态this.setState({count:count1})}//卸载组件按钮的回调death (){ReactDOM.unmountComponentAtNode(document.getElementById(test))}//强制更新按钮的回调force (){this.forceUpdate()}//若state的值在任何时候都取决于props那么可以使用getDerivedStateFromPropsstatic getDerivedStateFromProps(props,state){console.log(getDerivedStateFromProps,props,state);return null}//在更新之前获取快照getSnapshotBeforeUpdate(){console.log(getSnapshotBeforeUpdate);return atguigu}//组件挂载完毕的钩子componentDidMount(){console.log(Count---componentDidMount);}//组件将要卸载的钩子componentWillUnmount(){console.log(Count---componentWillUnmount);}//控制组件更新的“阀门”shouldComponentUpdate(){console.log(Count---shouldComponentUpdate);return true}//组件更新完毕的钩子componentDidUpdate(preProps,preState,snapshotValue){console.log(Count---componentDidUpdate, preProps, preState, snapshotValue);}render(){console.log(Count---render);const {count} this.statereturn(divh2当前求和为{count}/h2button onClick{this.add}点我1/buttonbutton onClick{this.death}卸载组件/buttonbutton onClick{this.force}不更改任何状态中的数据强制更新一下/button/div)}}//渲染组件到页面ReactDOM.render(Demo a1 b2/,document.getElementById(test))
/script2.6.5. 重要的勾子
1.render初始化渲染或更新渲染调用 2.componentDidMount开启监听, 发送ajax请求 3.componentWillUnmount做一些收尾工作, 如: 清理定时器
2.6.6. 即将废弃的勾子
1.componentWillMount 2.componentWillReceiveProps 3.componentWillUpdate
现在使用会出现警告下一个大版本需要加上UNSAFE_前缀才能使用以后可能会被彻底废弃不建议使用。
2.6.7 getSnapshotBeforeUpdate
!DOCTYPE html
html langen
headmeta charsetUTF-8title4_getSnapShotBeforeUpdate的使用场景/titlestyle.list{width: 200px;height: 150px;background-color: skyblue;overflow: auto;}.news{height: 30px;}/style
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/17.0.1/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/17.0.1/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/17.0.1/babel.min.js/scriptscript typetext/babelclass NewsList extends React.Component{state {newsArr:[]}componentDidMount(){setInterval(() {//获取原状态const {newsArr} this.state//模拟一条新闻const news 新闻 (newsArr.length1)//更新状态this.setState({newsArr:[news,...newsArr]})}, 1000);}getSnapshotBeforeUpdate(){return this.refs.list.scrollHeight}componentDidUpdate(preProps,preState,height){this.refs.list.scrollTop this.refs.list.scrollHeight - height}render(){return(div classNamelist reflist{this.state.newsArr.map((n,index){return div key{index} classNamenews{n}/div})}/div)}}ReactDOM.render(NewsList/,document.getElementById(test))/script
/body
/html2.7. 虚拟DOM与DOM Diffing算法
2.7.1. 效果
需求验证虚拟DOM Diffing算法的存在
2.7.2. 基本原理图
经典面试题:1). react/vue中的key有什么作用key的内部原理是什么2). 为什么遍历列表时key最好不要用index?1. 虚拟DOM中key的作用1) key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。2). 详细的说: 当状态中的数据发生变化时react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较比较规则如下a. 旧虚拟DOM中找到了与新虚拟DOM相同的key(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM(2).若虚拟DOM中内容变了, 则生成新的真实DOM随后替换掉页面中之前的真实DOMb. 旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据创建新的真实DOM随后渲染到到页面2. 用index作为key可能会引发的问题1. 若对数据进行逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 界面效果没问题, 但效率低。2. 如果结构中还包含输入类的DOM会产生错误DOM更新 界面有问题。3. 注意如果不存在对数据的逆序添加、逆序删除等破坏顺序操作仅用于渲染列表用于展示使用index作为key是没有问题的。3. 开发中如何选择key?1.数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。2.如果确定只是简单的展示数据用index也是可以的。
