零:組件的樣式 /* 設定組件的樣式,3種: 1,內聯樣式 2,對象樣式 3,選取器樣式
注意:在React和HTML5中設定樣式時的書寫格式是有區別的 **1,HTML5以;結尾 React以,結尾 **2,HTML5中key,value都不加引號 React中屬於JavaScript對象,key的名字不能出現"-",需要使用駝峰命名法,如果value為字串,需要加引號. **3,HTML中,value如果是數字,需要帶單位 React中不需要帶單位 *我們定義一個組件類,同時使用三種設定組件樣式的方式 *需求:定義一個組件,分為上下兩行顯示內容 *<div> 內聯樣式:設定背景顏色,邊框大小,邊框顏色 * <h1></h1 > 對象樣式:設定背景顏色,字型顏色 * <p></p> 選取器樣式:設定字型大小 *</div> ****注意:在React中使用選取器樣式設定組件樣式時,屬性名稱不能使用class,需要使用className替換, 類似:使用htmlFor替換for */ 一:複合組件
也叫組合組件,建立多個組件合成一個組件 /* 需求:定義一個組件WebShow,功能:輸出網站的名字和網址,網址是一個可以點擊的連結. 分析:定義一個組件WebName負責輸出網站名字,定義組件WebLink顯示網站的網址,並且可以點擊 */ //定義WebName組件 var WebName = React.creatClass({ render:function() { return <h1>藍鷗科技</h1> } }); //定義WebLink組件 var WebLink = React.createClass({ render:function() { return <a href="http://www.lanou3g.com">http://www.lanou3g.com</a> } }); //定義WebShow組件 var WebShow = React.creatClass({ render: function() { return ( <div> <WebName /> <WebLink /> </div> ); } }); //渲染組件 ReactDOM.render( <WebShow />, document.getElementById("container") ); 二:props(一個屬性對象) /* React可以看成MVC中的View層,一般與資料層無關,但是 組件的兩個屬性和資料有關,(1)props(2)state props是組件自身的屬性,一般用於嵌套的內外層組件中,負責傳遞資訊(通常是由父層組件向子層組件傳遞) 注意:props對象中的屬性與組件的屬性一一對應,不要直接去修改props中屬性的值. */ /* 需求:定義一個組件WebShow,功能:輸出網站的名字和網址,網址是一個可以點擊的連結. 分析:定義一個組件WebName負責輸出網站名字,定義組件WebLink顯示網站的網址,並且可以點擊
思路: 1,給WebShow設定兩個屬性,wname,wlink 2,WebShow的props對象增加了兩個屬性值 3,WebName從WebShow的props對象中擷取wname的值,即網站的名稱 4,WebLink同理 */ //定義WebName var WebName = React.creatClass({ render:function() { return <h1>{this.props.webname}</h1> } }); //定義WebLink var WebLink = React.createClass({ render:function() { return <a href= {this.props.weblink} >{this.props.weblink}</a> } }); //定義Webshow var WebShow = React.creatClass({ render: function() { return ( <div> <WebName webname={this.props.wname} /> <WebLink weblink={this.props.wlink}/> </div> ); } }); //渲染 ReactDOM.render( <WebShow wname="藍鷗科技" wlink=" http://www.lanou3g.com"/>, document.getElementById("container") ); /* ...this.props props提供的文法糖,可以將父組件中的全部屬性都複製給子組件 需求:定義一個組件Link,Link組件中只包含一個<a>,我們不給<a>設定任何屬性,所有屬性圈住從父組件複製得到 */ var Link = React.createClass({ render: function() { return <a {...this.props}>{this.props.name}</a> } });
ReactDOM.render( <Link href=" http://www.lanou3g.com" name="藍鷗科技" />, document.getElementById("container") ); 三:children /* this,props.children children是一個例外,不是跟組件的屬性對應的. 表示組件的所有子節點 HTML中有在一種標籤:列表<ul><ol><li>
定義一個列表組件,清單項目中現實的內容,以及清單項目的數量都由外部決定 */ var ListComponent = React.creatClass({ render:function(){ return ( <ul> { /* 清單項目數量以及內容不確定,在建立模板時才能確定 利用this.props.children從父組件中擷取需要展示的清單項目內容
擷取清單項目內容後,需要遍曆children,逐項進行設定 使用React.Children.map方法 傳回值:數組對象,這裡數組中的元素是<li> */ React.Children.map(this.props.children,function(children){ //children是遍曆得到的父組件的子節點 return <li>{children}<li/> }) } </ul> ); } }); ReactDOM.render( ( <ListComponent> <h1>藍鷗科技</h1> <a href="http://www.lanou3g.com">http://www.lanou3g.com</a> </ListComponent> ), document.getElementById("container") ); 四:屬性驗證 /* propTypes 組件類的屬性
用於驗證組件執行個體的屬性是否符合要求 */ var ShowTitle = React.creatClass({ propTypes:{ //title數群組類型必須為字串 title:React.PropTypes.String.isRequired }, render: function() { return <h1>{this.props.title}</h1> } } ); ReactDOM.render{ <ShowTitle title="123"/>, document.getElementById("container") }; /* 設定組件屬性的預設值
通過實現組件的getDefaultProps方法,對屬性設定預設值 */ var MyTitle = React.createClass({ getDefaultProps:function() { return { title:"藍鷗" }; }, render:function() { return <h1>{this.props.title}</h1> } }); ReactDOM.render( <MyTitle />, document.getElementById("container") ); 五:state /* 事件處理
react中的事件名稱,首字母小寫,駝峰命名法
案例:定義一個組件,組件中包含一個button,給button綁定onclick事件 */ var MyButton = React.createClass({ handleClick:function() { alert("點擊按鈕觸發的效果"); }, render:function(){ return ( <button onClick={this.handleClick}>{this.props.buttonTitle}</button> ); } });
ReactDOM.render( <MyButton buttonTitle="按鈕" />, document.getElementById("container") ); /* state 狀態 props 組件自身的屬性
this.state */ //需求:建立一個CheckButton的組件,包含一個Checkbox類型<input> //複選框在選中和未選中兩種狀態下會顯示不同的文字,即根據狀態渲染
var CheckButton = React.createClass({ //定義初始狀態 getInitialState: function() { return { //在這個對象中設定的屬性,將會儲存在state中 //預設:未選中 isCheck:false } }, //定義事件綁定的方法 handleChange: function() { //修改狀態值,通過this.state讀取設定的狀態值 this.setState({ isCheck:!this.state.isCheck }); } , render: function() { //根據狀態值設定顯示的文字 //在jsx文法中,不能直接使用if,使用三目運算子 var text = this.state.isCheck ? "已選中" : "未選中";
return ( <div> <input type="checkbox" onChange={this.handleChange} /> <text> </div> ) ; } }); ReactDOM.render( <CheckButton />, document.getElementById("container") ); //當state發生變化時,會調用組件內部的render方法. 六:表單 /* 需求:定義一個組件,將使用者在輸入框內輸入的內容進行即時顯示
分析:組件與使用者互動過程中,存在狀態的變化,即輸入框的值 */ var Input = React.createClass({ getInitialState: function() { return { value:"請輸入" }; }, handleChange: function(event) { //通過event.target.value讀取使用者輸入的值 this.setState({ value:event.target.value }); }, render: function() { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render( <Input />, document.getElementById("container") ); 七:組件的生命週期 /* 生命週期: 1,組件生命週期三個狀態: Mounting:組件掛載,已插入真實 DOM Updating:組件更新,正在被重新渲染 Unmounting:組件移出,已移出真實 DOM
2,組件的生命週期四個階段 建立,執行個體化,更新,銷毀 */ /* 1,Mounting/組件掛載相關:| (1)componentWillMount 組件將要掛載,在render之前執行,但只執行一次,即使多次重複渲染該組件,或者改變了組件的state (2)componentDidMount 組件已經掛載,在render之後執行,同一個組件重複渲染只執行一次
2,Updating/組件更新相關 (1)componentWillReceiveProps(object nextProps) 已載入組件收到新的props之前調用,注意組件初始化渲染時則不會執行 (2)shouldComponentUpdate(object nextProps,object nextState) 組件判斷是否重新渲染時調用,該介面實際是在組件接收到了新的props或者新的state的時候會立即調用,然後通過 (3)componentWillUpdate(object nextProps,object nextState) 組件將要更新 (4)componentDidUpdate(object prevProps,object prevState) 組件已經更新 3,Unmounting/組件移除相關: (1)componentWillUnmount 在組件要被移除之前的時間點觸發,可以利用該方法來執行一些必要的清理組件將要移除 4,生命週期中與props和state相關: (1)getDefaultProps 設定props屬性預設值 (2)getInitialState 升值state屬性初始值 */ /* 生命週期各階段介紹 */ var Demo = React.creatClass({ /* 一:建立階段 流程: 只調用getDefaultProps方法 */ getDefaultProps: function() { //在建立類的時候被調用,設定this.props的預設值 console.log("getDefaultProps"); return {}; } , /* 二:執行個體化階段 流程:
getInitlalState componentWillMount render componentDidMount */ getInitlalState: function() { //設定this.state的預設值 console.log(" getInitlalState "); return nll; }, componentWillMount: function(){ //在render之前調用 console.log(" componentWillMount "); }, render: function() { //渲染並返回一個虛擬DOM console.log("render"); return <div>Hello React</div> }, componentDidMount: function(){ //在render之後調用 //在該方法中,React會使用render方法返回的虛擬DOM對象建立真實的DOM結構 //可以在這個方法中讀取DOM節點 console.log(" componentDidMount "); }, /* 三:更新階段 流程: componentWillReceiveProps shouldComponentUpdate 如果傳回值是false,後三個方法不執行 componentWillUpdate render componentDidUpdate */ componentWillReceiveProps: function() { console.log(" componentWillReceiveProps "); },
shouldComponentUpdate : function() { console.log(" shouldComponentUpdate "); return true; }, componentWillUpdate : function() { console.log(" componentWillUpdate "); }, componentDidUpdate: function() { console.log(" componentDidUpdate "); }, /* 銷毀階段 流程: componentWillUnmount */ componentWillUnmount: function() { console.log(" componentWillUnmount "); },
}); //第一次建立並載入組件 ReactDOM.render( <Demo />, document.getElementById("container") ); //重新渲染組件(相當於進行更新群組件) ReactDOM.render( <Demo />, document.getElementById("container") ); //移除組件 ReactDOM.unmpuntComponentAtNode(document.getElementById("container"));
