2020/11/19、 周四、今天又是奮斗的一天。

@Author：Runsen

React，相比于Vue，React更加靈活，但是對JavaScript基礎的要求也更高一些。我繼續學習React

文章目錄

• propTypes
• defaultProps
• refs
• 生命周期函數

propTypes

數據類型校驗，當父組件傳遞的數據與子組件規定的數據類型不一樣時會報警告錯誤。

import PropTypes from 'prop-types'組件名.propTypes = {test: PropTypes.string.isRequired,//isRequired必須傳遞content: PropTypes.string,deleteIntem: PropTypes.func,index: PropTypes.number

propTypes可以用來做類型的校驗，如果后面有isRequired ，組件中的數據必須要求傳遞

defaultProps

默認值，與上的test屬性相結合，test是一個必填的值，當父組件沒有傳遞test值時，則會自動調用defaultProps方法

TodoItem.defaultProps = {test: 'hello world' }

refs

首先，我們TodoList中創建一個 ref 實例，并將其賦值給 this.Input，然后通過 ref 屬性將其分配給 input 元素。

那么我們可以使用const value = this.input.value;替換const value = e.target.value;，

生命周期函數

生命周期函數指的在某一個時刻組件會自動調用執行的函數

Mounting（加載階段：涉及6個鉤子函數）

• constructor() 加載的時候調用一次，可以初始化state
• getDefaultProps() 設置默認的props，也可以用dufaultProps設置組件的默認屬性
• getInitialState() 初始化state，可以直接在constructor中定義this.state
• componentWillMount() 組件加載時只調用，以后組件更新不調用，整個生命周期只調用一次，此時可以修改state
• render() react最重要的步驟，創建虛擬dom，進行diff算法，更新dom樹都在此進行
• componentDidMount() 組件渲染之后調用，只調用一次

Updating（更新階段：涉及5個鉤子函數)

• componentWillReceiveProps(nextProps) 組件加載時不調用，組件接受新的props時調用
• shouldComponentUpdate(nextProps, nextState) 組件接收到新的props或者state時調用，return true就會更新dom（使用diff算法更新），return false能阻止更新（不調用render）
• componentWillUpdata(nextProps, nextState) 組件加載時不調用，只有在組件將要更新時才調用，此時可以修改state
• render() react最重要的步驟，創建虛擬dom，進行diff算法，更新dom樹都在此進行
• componentDidUpdate() 組件加載時不調用，組件更新完成后調用

總結

以上是生活随笔為你收集整理的七十七、React中的propTypes，defaultProps和生命周期函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。