一、前言：
屬性1：state
屬性2：props
屬性3：ref 與事件處理
二、主要內容：
屬性1：state
1，認識：
1) state 是組件對象中最重要的屬性，值是一個對象（可以包含多個數組，有點像vue中的data屬性）
2）組件被稱為“狀態機”，通過更新組件的state來更新對應的頁面顯示
2，操作state通常要經歷三個狀態
1) 初始化狀態: constructor (props) { super(props) this.state = { stateProp1 : value1, stateProp2 : value2 } } 2) 讀取某個狀態值 this.state.statePropertyName 3) 更新狀態---->組件界面更新 this.setState({ stateProp1 : value1, stateProp2 : value2 })
3，案例演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="obj"></div> <script type="text/javascript" src="./js/react.development.js"></script> <script type="text/javascript" src="./js/react-dom.development.js"></script> <script type="text/javascript" src="./js/babel.min.js"></script> <script type="text/babel"> //自定義Like組件 class Like extends React.Component{ //定義初始化狀態 constructor(props){ super(props) //交給父類去執行 this.state={ //定義state屬性，並添加一個isLikeMe數據 isLikeMe:false } //強制綁定，讓函數handleClick等於當前組件 this.handleClick= this.handleClick.bind(this) } //定義操作函數，注意函數里面的this是undefined handleClick(){ //更新state狀態 const isLikeMe = !this.state.isLikeMe this.setState({ isLikeMe }) } render(){ //讀取狀態 const {isLikeMe} = this.state return <h1 onClick={this.handleClick}>{isLikeMe ? '我喜歡你':'你喜歡我'}</h1> } } //渲染 ReactDOM.render(<Like />, document.getElementById('obj')) </script> </body> </html>
4，注意點：
1）更新 state 狀態定義的函數里面的 this 不是指向當前對象的，需要用 bind 強制綁定this為當前組件
2）強制綁定 this ： this.handleClick = this.handleClick.bind(this)
屬性1：props
1，理解：
1) 每個組件對象都會有 props 屬性
2）組件標簽中所以的屬性都保存在 props 中
2，作用：
1）通過標簽屬性從組件外向組件內傳遞變化的數據
2）組件內部不需要修改 props 數據
3，props 的操作：
//1）內部讀取某個屬性值 this.props.propertyName //2) 對props中的屬性值進行類型限制和必要性限制 方法一：新版本中已經被棄用 Person組件名： Person.propTypes={ name: React.PropTypes.string.isRequired, age:React.PropTypes.number.isRequired } 方法二： 需要用到prop-types.js文件 Person.propTypes={ name:PropTypes.string.isRequired } //3）擴展屬性：對象的所有屬性通過props傳遞 <Person {...person} /> //默認傳遞了所有屬性 //4)默認屬性值 Person.defaultProps = { name:"Mary" } //5)組件類的構造函數， constructor(props){ super(props) console.log(props)//里面存放所有屬性 }
4，舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="ul"></div> <script type="text/javascript" src="./js/react.development.js"></script> <script type="text/javascript" src="./js/react-dom.development.js"></script> <script type="text/javascript" src="./js/prop-types.js"></script> <script type="text/javascript" src="./js/babel.min.js"></script> <script type="text/babel"> function List(props){ return ( <ul> <li>姓名：{props.name}</li> <li>年齡: {props.age}</li> <li>性別:{props.sex}</li> </ul> ) } const person ={ name:'xxm', age:18, sex:'女' } //設置默認屬性 List.defaultProps={ age:55, sex:"男" } //對類型進行限制和必要性限制 List.propTypes={ name:PropTypes.string.isRequired } //使用擴展屬性 ReactDOM.render(<List {...person}/>, document.getElementById('ul')) </script> </body> </html>
屬性3：ref與事件處理
1，理解：
1）組件內的標簽都可以定義 ref 屬性來標識自己
2）在組件中可以通過 this.msglnput 來的到真實的 DOM 元素
3）作用：通過 ref 獲取組件特定的標簽對象，進行讀取相關數據
//ref使用方式一： <input type="text" ref="content"/> //ref使用方式二： <input type="text" ref={input=>this.input=input}/> //input=>this.input=input 的含義是將當前的input 賦值給組件里面的input
2，事件處理
1）通過onXxx屬性指定組件的事件處理函數
2）React中的事件是通過事件委托方式處理的（委托給組件最外層的元素）
3）通過event.target可以得到發生事件的DOM元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="obj1"></div> <script type="text/javascript" src="./js/react.development.js"></script> <script type="text/javascript" src="./js/react-dom.development.js"></script> <script type="text/javascript" src="./js/prop-types.js"></script> <script type="text/javascript" src="./js/babel.min.js"></script> <script type="text/babel"> class MyComponent extends React.Component{ constructor(props){ super(props) //給處理函數強制綁定this this.handleClick=this.handleClick.bind(this) this.handleBlur = this.handleBlur.bind(this) } handleClick(){ alert(this.input.value) } handleBlur(event){ alert(event.target.value) } render(){ return ( <div> <input type="text" ref="content"/> <input type="text" ref={input=>this.input=input}/> <button onClick={this.handleClick}>點擊按鈕</button> <input type="text" placeholder="請輸入數據" onBlur={this.handleBlur} /> </div> ) } } ReactDOM.render(<MyComponent />, document.getElementById("obj1")) </script> </body> </html>
三，總結
React中props和state都是存儲數據的區別如下
1）state: 組件自身內部可變化的數據
2）props: 從組件外部向組件內部傳遞數據，組件內部只讀取不修改
注意點：
1）組件內置的方法中的this為組件對象，z
2) 在組件類中自定義的處理函數方法的this默認為null 所以需要強制綁定