网站域名包括哪些,百度小程序是什么,石家庄网站排名优化哪家好,获取wordpress所有分类链接地址第二章 React面向组件编程
六、组件的生命周期
1. 效果
需求:定义组件实现以下功能#xff1a; 让指定的文本做显示 / 隐藏的渐变动画从完全可见#xff0c;到彻底消失#xff0c;耗时2S点击“不活了”按钮从界面中卸载组件 !DOCTYPE html
html lange…第二章 React面向组件编程
六、组件的生命周期
1. 效果
需求:定义组件实现以下功能 让指定的文本做显示 / 隐藏的渐变动画从完全可见到彻底消失耗时2S点击“不活了”按钮从界面中卸载组件 !DOCTYPE html
html langen
headmeta charsetUTF-8title1_引出生命周期/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel//创建组件//生命周期回调函数 生命周期钩子函数 生命周期函数 生命周期钩子class Life 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(Life/,document.getElementById(test))/script
/body
/html2. 理解
组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时会在特定的生命周期回调函数中做特定的工作。
3. 生命周期流程图(旧) 生命周期的三个阶段旧
3.1 初始化阶段: 由ReactDOM.render()触发—初次渲染
constructor()componentWillMount()render()componentDidMount()
3.2 更新阶段: 由组件内部this.setSate()或父组件重新render触发
shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()
3.3 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
!DOCTYPE html
html langen
headmeta charsetUTF-8title2_react生命周期(旧)/title
/head
body!-- 准备好一个“容器” --div idtest/div!-- 引入react核心库 --script typetext/javascript src../js/react.development.js/script!-- 引入react-dom用于支持react操作DOM --script typetext/javascript src../js/react-dom.development.js/script!-- 引入babel用于将jsx转为js --script typetext/javascript src../js/babel.min.js/scriptscript 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 Count 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()}//组件将要挂载的钩子componentWillMount(){console.log(Count---componentWillMount);}//组件挂载完毕的钩子componentDidMount(){console.log(Count---componentDidMount);}//组件将要卸载的钩子componentWillUnmount(){console.log(Count---componentWillUnmount);}//控制组件更新的“阀门”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(Count/,document.getElementById(test))/script
/body
/html4. 生命周期流程图(新) 生命周期的三个阶段新
4.1 初始化阶段: 由ReactDOM.render()触发—初次渲染
constructor()getDerivedStateFromPropsrender()componentDidMount()
4.2 更新阶段: 由组件内部this.setSate()或父组件重新render触发
getDerivedStateFromPropsshouldComponentUpdate()render()getSnapshotBeforeUpdatecomponentDidUpdate()
4.3 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
componentWillUnmount()
!DOCTYPE html
html langen
headmeta charsetUTF-8title3_react生命周期(新)/title
/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/babel//创建组件class Count extends React.Component{/* 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() 常用一般在这个钩子中做一些收尾的事例如关闭定时器、取消订阅消息*///构造器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(Count count{199}/,document.getElementById(test))/script
/body
/html!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
/html5. 重要的勾子
render初始化渲染或更新渲染调用componentDidMount开启监听发送ajax请求componentWillUnmount做一些收尾工作如清理定时器
6. 即将废弃的勾子
componentWillMountcomponentWillReceivePropscomponentWillUpdate
现在使用会出现警告下一个大版本需要加上UNSAFE_前缀才能使用以后可能会被彻底废弃不建议使用。
七、虚拟DOM与DOM Diffing算法
1. 效果 2. 基本原理图 3. 代码
!DOCTYPE html
html
headmeta charsetUTF-8title1_验证diff算法/title
/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 Time extends React.Component {state {date: new Date()}componentDidMount () {setInterval(() {this.setState({date: new Date()})}, 1000)}render () {return (divh1hello/h1input typetext/span现在是{this.state.date.toTimeString()}input typetext//span/div)}}ReactDOM.render(Time/,document.getElementById(test))
/script
/body
/html!DOCTYPE html
html
headmeta charsetUTF-8title2_key的作用/title
/head
body
div idtest/div
!-- 引入react核心库 --
script typetext/javascript src../js/react.development.js/script
!-- 引入react-dom --
script typetext/javascript src../js/react-dom.development.js/script
!-- 引入babel --
script typetext/javascript src../js/babel.min.js/scriptscript typetext/babel/*经典面试题: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也是可以的。*//* 慢动作回放----使用index索引值作为key初始数据{id:1,name:小张,age:18},{id:2,name:小李,age:19},初始的虚拟DOMli key0小张---18input typetext//lili key1小李---19input typetext//li更新后的数据{id:3,name:小王,age:20},{id:1,name:小张,age:18},{id:2,name:小李,age:19},更新数据后的虚拟DOMli key0小王---20input typetext//lili key1小张---18input typetext//lili key2小李---19input typetext//li-----------------------------------------------------------------慢动作回放----使用id唯一标识作为key初始数据{id:1,name:小张,age:18},{id:2,name:小李,age:19},初始的虚拟DOMli key1小张---18input typetext//lili key2小李---19input typetext//li更新后的数据{id:3,name:小王,age:20},{id:1,name:小张,age:18},{id:2,name:小李,age:19},更新数据后的虚拟DOMli key3小王---20input typetext//lili key1小张---18input typetext//lili key2小李---19input typetext//li*/class Person extends React.Component{state {persons:[{id:1,name:小张,age:18},{id:2,name:小李,age:19},]}add (){const {persons} this.stateconst p {id:persons.length1,name:小王,age:20}this.setState({persons:[p,...persons]})}render(){return (divh2展示人员信息/h2button onClick{this.add}添加一个小王/buttonh3使用index索引值作为key/h3ul{this.state.persons.map((personObj,index){return li key{index}{personObj.name}---{personObj.age}input typetext//li})}/ulhr/hr/h3使用id数据的唯一标识作为key/h3ul{this.state.persons.map((personObj){return li key{personObj.id}{personObj.name}---{personObj.age}input typetext//li})}/ul/div)}}ReactDOM.render(Person/,document.getElementById(test))
/script
/body
/html
