React中父子元件通訊詳解

// 定義父元件slider
class Slider extends Component {
// 建構函式
constructor(props) {
super(props);
// 初始化狀態
this.state = {
title: '返回頂部'
}
}
// 父元件方法
parentMethod() {
console.log(this, arguments)
}
render() {
return (
<div className="slider">
{/*字串*/}
{/*<GoTop text="網址導航"></GoTop>*/}
{/*屬性資料*/}
{/*<GoTop text={this.props.title}></GoTop>*/}
{/*狀態資料*/}
{/*<GoTop text={this.state.title}></GoTop>*/}
{/*傳遞方法*/}
<GoTop text={this.state.title} method={this.parentMethod.bind(this, 200, 'parent')}></GoTop>
{/*<GoTop text={this.state.title} method={this.parentMethod}></GoTop>*/}
</div>
)
}
}
// 定義元件
class GoTop extends Component {
// 定義方法
childMethod(e) {
// 執行父元件方法
this.props.method(200, e);
}
// 4 渲染虛擬DOM
render() {
// console.log(this.props)
// 繫結事件
// return <span onClick={this.props.method.bind(this, 100, 'child')}>{this.props.text}</span>
// 在子元件方法中執行
// return <span onClick={this.childMethod.bind(this)}>{this.props.text}</span>
// 簡便寫法
return <span onClick={e => this.props.method(e)}>{this.props.text}</span>
}
}

// 定義元件
class GoTop extends Component {
// 建構函式
constructor(props) {
super(props);
this.state = {
text: props.text
}
}
// 存在期五個階段
// 1 元件即將接收新的屬性資料
componentWillReceiveProps(newProps) {
console.log(111, 'componentWillRecieveProps', newProps, this.props)
// 將屬性資料，儲存到狀態中
this.setState({ text: newProps.text })
}
// 2 元件是否更新
shouldComponentUpdate(newProps, newState) {
console.log(222, 'shouldComponentUpdate', newProps, this.props, 'state', newState, this.state)
// 是否可以更新
// return true;
// 根據屬性或者狀態的改變來優化
return newProps.text !== this.props.text || newState.text !== this.state.text
}
// 3 元件即將更新
componentWillUpdate(newProps, newState) {
console.log(333, 'componentWillUpdate', newProps, this.props, 'state', newState, this.state, findDOMNode(this).innerHTML)
}
// 4 渲染虛擬DOM
render() {
console.log(444, 'render', this.props, 'state', this.state)
// return <span>{this.props.text}</span>
return <span>{this.state.text}</span>
}
// 5 元件更新完成
componentDidUpdate(oldProps, oldState) {
console.log(555, 'componentDidUpdate', oldProps, this.props, 'state', oldState, this.state, findDOMNode(this).innerHTML)
}
// 元件建立完成
componentDidMount() {
window.onscroll = () => {
// 移動超過300顯示返回頂部
if (window.scrollY > 300) {
this.setState({
text: '返回頂部'
})
} else {
// 顯示頭條新聞
this.setState({
text: '頭條新聞'
})
}
// console.log(window.scrollY)
}
}
}