const log = (...value) => console.log(...value)
import React from 'react';
import ReactDOM from 'react-dom';
const Input = React.createClass({
// render 首次渲染之前调用
componentWillMount () {
// 页面没渲染完 输出 undefined
log( document.querySelector('input') )
},
// 渲染完成后调用
componentDidMount () {
log( document.querySelector('input') )
},
// 组件被更新前调用一次 返回更新后的 props || state的值
componentWillUpdate (nextProps, nextState) {
log(nextProps, nextState)
},
// 组件被更新后调用一次 返回更新前的 props || state的值
componentDidUpdate (prevProps, prevState) {
log(prevProps, prevState)
},
// 组件从挂载点移除时调用
componentWillUnmount () {
log('移除')
},
/**
* 定义组件是否重新渲染 (必须有true|| false返回值 否则报错)
该方法在componentWillUpdate 之前调用
true: 重新渲染
false: 不重新渲染
*/
shouldComponentUpdate (nextProps, nextState) {
log(nextProps, nextState, '--')
return true
},
getInitialState () {
return {
value: '小花',
age: 25
}
},
handleChange (event) {
this.setState({
value: event.target.value
})
},
handleAge () {
this.setState({
age: 26
})
},
closeDOM () {
// 把节点从挂载点移除
},
render () {
log('更新')
let value = this.state.value
let age = this.state.age
return (
<div className="js-dom">
<input type="text" value={value} onChange={this.handleChange} />
<input type="text" value={age} onChange={this.handleAge} />
<input type="button" onClick={this.closeDOM} />
<p>{value}</p>
</div>
)
}
})
ReactDOM.render(
<Input />,
document.querySelector('.content')
)