React生命週期、鉤子函式
阿新 • • 發佈：2019-01-26
<body> <div id="box"></div> <script src="react.15.6.js"></script> <script src="react-dom.15.6.js"></script> <script src="babel.js"></script> <script src="https://unpkg.com/prop-types/prop-types.js"></script><!--自 React v15.5 起就被移除了。所以現在我們改用 prop-types 庫代替。--> <script type="text/babel"> class Message extends React.Component{ //初始化階段執行：1.constructor 2.componentWillMount 3.render 4.componentDidMount constructor(){//1 super(); console.log("constructor"); this.state = { msg: "大吉大利！今晚吃雞！" } } componentWillMount(){//2 (元件將要被插入真實的dom之前) console.log("componentWillMount") } //已插入真實DOM進入(mounting)狀態 render(){//初始化(mounting)時:1 被重新渲染(updating)時：3 console.log("render"); return ( <div> <p>{this.props.name}:{this.state.msg}</p> <button onClick={this.changeCon.bind(this)}>換一句</button> </div> ) } componentDidMount(){//2 (元件已經被插入到真實的dom,在這裡呼叫非同步在修改狀態，做dom操作) console.log("componentDidMount") } //當點選按鈕觸發changeCon之後進入重新渲染(updating)狀態，執行：1.shouldComponentUpdate 2.componentWillUpdate 3.render 4.componentDidUpdate shouldComponentUpdate(newProps, newState){//1 (當元件的props或者state發生改變之前，先判斷永不允許呼叫render函式) console.log("shouldComponentUpdate") // if(typeof newProps.name === "string") return true; } componentWillUpdate(){//2 (render函式被呼叫之前) console.log("componentWillUpdate") } componentDidUpdate(){//4 (render函式被呼叫之後) console.log("componentDidUpdate") } //當子元件中的按鈕被點選觸發changeName後執行componentWillReceiveProps,再次進入重新渲染(updating)狀態 componentWillReceiveProps(){//1 (當元件接受到新props的時候) console.log("componentWillReceiveProps") } componentWillUnmount(){//元件將要被移出真實DOM的時候 //... } changeCon(event){ console.log(event.target); this.setState({msg: "GEME IS OVER!"}) } } Message.propTypes = {//key,驗證的屬性 ，value,驗證的方式 name: PropTypes.string//number、oneOfType、oneOf、isRequired、、、 } class Name extends React.Component{ constructor(){ super(); this.state = { name: "阿林" } } render(){ console.log("父---rander") //初始化的時候先執行父元件的初始化，從而進入到子元件的初始化，對於事件，是從那個元件中觸發，就從那個元件開始執行 return ( <div> <Message name={this.state.name}></Message> <button onClick={(e)=>this.changeName(e)}>換個名字</button> </div> ) } componentWillUpdate(){ console.log("父---componentWillUpdate"); } componentDidUpdate(){ console.log("父---componentDidUpdate"); } changeName(event){ console.log(event.target) this.setState({name: "林哥"}) } } ReactDOM.render(<Name></Name>, document.querySelector("#box")) </script> </body>
輸出結果：