组件初始化阶段
constructor ( props ) {
super ( props )
this . state = {
msg : 'hello React.js'
}
this . change = this . change. bind ( this )
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 我是分割线-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
static getDerivedStateFromProps ( nextProps, prevState) {
console. log ( '1' , nextProps )
console. log ( '2' , prevState )
return {
msg: 'hello'
}
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 我是分割线-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
componentWillMount ( ) {
fetch ( '/data.json' )
. then ( res => res. json ( ) )
. then ( data => console. log ( data ) )
. catch ( error => {
if ( error) throw error
} )
this . setState ( {
msg: 'componentWillMount change msg '
} )
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 我是分割线-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
定义了一个方法:
change = ( ) => {
this . setState ( {
msg: 'hello gengbingchao~~'
} )
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 我是分割线-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
render ( ) {
return (
< Fragment>
< h3> Father组件 < / h3>
< button onClick = { this . change } > 点击 < / button>
< p> constructor : { this . state. msg } < / p>
< / Fragment>
)
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 我是分割线-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
componentDidMount ( ) {
fetch ( '/data.json' )
. then ( res => res. json ( ) )
. then ( data => {
console. log ( 'componentDidMount' , data )
this . setState ( {
msg: data. name
} )
} )
. catch ( error => {
if ( error ) throw error
} )
}
}
更新阶段
constructor ( props ) {
super ( props )
this . state = {
msg : 'hello React.js'
}
}
changeMsg = ( ) => {
this . setState ( {
msg: 'hello 篮球'
} )
}
render ( ) {
return (
< Fragment>
< h3> Father组件 - 更新阶段< / h3>
< button onClick = { this . changeMsg } > changemsg < / button>
< p> constructor : { this . state. msg } < / p>
< p> money: { this . props. money } < / p>
< / Fragment>
)
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 暗中观察-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
componentWillReceiveProps ( nextProps ) {
console. log ( 'componentWillReceiveProps ' ) ;
console. log ( nextProps ) ;
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 暗中观察-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
shouldComponentUpdate ( ) {
return true
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 暗中观察-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - componentWillUpdate-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
componentWillUpdate ( ) {
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 铛铛铛铛-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- getSnapshotBeforeUpdate-- -- -- -- -- -- -- -- -- -- -- -- -- --
getSnapshotBeforeUpdate ( ) {
console. log ( 'getSnapshotBeforeUpdate' )
return 1000
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - 我分割线又回来了-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - componentDidUpdate-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
componentDidUpdate ( ) {
fetch ( '/data.json' )
. then ( res => res. json ( ) )
. then ( data => console. log ( 'componentDidUpdate' , data ) )
. catch ( error => {
if ( error ) console. log ( error )
} )
document. querySelector ( 'h3' ) . style. background = 'red'
console. log ( 'componentDidUpdate' )
}
销毁阶段
destory = ( ) => {
ReactDOM. unmountComponentAtNode ( document. querySelector ( '#root' ) )
}
render ( ) {
return (
< Fragment>
< div className = "father-box" >
< h3> Father组件 - 更新阶段< / h3>
< button onClick = { this . destory } > 内部销毁 < / button>
< p> constructor : { this . state. msg } < / p>
< p> money: { this . props. money } < / p>
< / div>
< / Fragment>
)
}
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - componentWillUnmount-- -- -- -- -- -- -- -- -- -- -- -- -
componentWillUnmount ( ) {
console. log ( 'componentWillUnmount' )
}
错误处理(componentDidCatch() — 16.3版本之后才有的)
constructor ( props) {
super ( props) ;
this . state = { hasError: true } ;
}
static getDerivedStateFromError ( error) {
console. log ( 'getDerivedStateFromError ' )
return { hasError: true } ;
}
componentDidCatch ( error, info) {
console. log ( 'info' , info )
}
changeHasError = ( ) => {
this . setState ( {
hasError: ! this . state. hasError
} )
}
render ( ) {
if ( this . state. hasError) {
return (
< div>
< h1> Something went wrong. < / h1>
< button onClick = { this . changeHasError } > 点击 < / button>
< / div>
) ;
}
return < div> 其他子组件正常 < / div> ;
}
}