react学习第五天(版本16.13.1)高阶开发

1、 父组件中如果state中的对象发生变化,子组件会重新加载吗?生命周期函数shouldComponentUpdate

答案: 会重新加载

如何处理

在子组件中进行判断,是否更新

shouldComponentUpdate ( nextProps , nextState ){

// console.log(nextProps,nextState) // 根据值进行判断

if ( nextProps . nowTime === this . props . nowTime ){

return false

} else {

return true

}

}

第二中处理方式,使用pure进行对象浅比较

 

export default class Usa extends React . PureComponent {

// shouldComponentUpdate(nextProps,nextState){

// // console.log(nextProps,nextState)

// if(nextProps.nowTime === this.props.nowTime){

// return false

// }else{

// return true

// }

// }

render (){

console . log ( "USA" )

return (

< div >

< div > 当前 < span className = "country-cn" > 美国 </ span > 时间: { this . props . nowTime } </ div >

</ div >

)

}

}

 

2、react的模版标签是什么Fragment

import React , { Fragment } from 'react' ;

 

export default class Usa extends React . PureComponent {

initLi () {

return (

<Fragment>

<li>第一条</li>

<li>第二条</li>

</Fragment>

);

}

render () {

console . log ( 'USA' );

return (

< div >

< div >

当前 < span className = "country-cn" > 美国 </ span > 时间: { this . props . nowTime }

</ div >

< ul > { this . initLi () } </ ul >

</ div >

);

}

}

 

来源：oschina

链接：https://my.oschina.net/liuxinzhou/blog/4298636