2017.11.30 React基礎語法之一組件
1.推薦一個React學習中文網站:http://www.css88.com/react/
2.使用jsx來將代碼封裝成React組件,然後像插入普通 HTML 標簽一樣,在其他地方插入這個組件。使用React.createClass用於生成一個組件
var MyComponent=React.createClass({ render: function() { return <h1>Hello world!</h1>; } }); ReactDOM.render( <MyComponent />, document.getElementById(‘example‘) );
上面代碼中,變量 MyComponent就是一個組件類。模板插入 <MyComponent /> 時,會自動生成 MyComponent 的一個實例(下文的"組件"都指組件類的實例)。所有組件類都必須有自己的 render 方法,用於輸出組件。
3.React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
註意:在react中通常約定組件類的第一個字母必須大寫,html標簽都是小寫
//要渲染 HTML 標簽,只需在 JSX 裏使用小寫字母開頭的標簽名。 var myDivElement = <div className="foo" />; React.render(myDivElement, document.getElementById(‘example‘));
//要渲染 React 組件,只需創建一個大寫字母開頭的本地變量。 var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent />; React.render(myElement, document.getElementById(‘example‘));
4.重點之一:復合組件
var WebSite = React.createClass({ render: function() {return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="菜鳥教程" site=" http://www.runoob.com" />, document.getElementById(‘example‘) );
5.重點之二:動態組件
var MyComponent=React.createClass({ getInitialState: function() { return {clickNum: 0}; }, handleClick:function(){ //組件的事件動作 var num=this.state.clickNum; //組件的狀態 num++; this.setState({clickNum:num}); }, render: function() { return ( <div> <h1 onClick={this.handleClick}>Hello {this.props.name}!</h1> //組件的屬性 <h2 style={{color:‘red‘}}>點擊{this.props.name}次數:{this.state.clickNum}</h2> </div> ); } }); ReactDOM.render( <div> <MyComponent name="張三" /> <hr/> <MyComponent name="李四" /> </div>, document.getElementById(‘example‘) );
上面代碼中定義的MyComponent組件包含屬性,狀態和事件,是一個簡單的比較完整的組件。使用props通過父組件進行傳遞值,使用state定義組件自己的狀態,組件支持的大部分的DOM操作事件。
6.關於狀態state:
React 裏,只需更新組件的 state,然後根據新的 state 重新渲染用戶界面(不要操作 DOM)。
- 組件免不了要與用戶互動,React 將組件看成是一個狀態機,一開始有一個初始狀態,然後用戶互動,導致狀態變化,從而觸發重新渲染 UI。
- getInitialState 方法用於定義初始狀態,也就是一個對象,這個對象可以通過 this.state 屬性讀取。當用戶點擊組件,導致狀態變化,this.setState 方法就修改狀態值,每次修改以後,自動調用 this.render 方法,再次渲染組件。
- 由於 this.props 和 this.state 都用於描述組件的特性,可能會產生混淆。
- 一個簡單的區分方法是,this.props 表示那些一旦定義,就不再改變的特性,而 this.state 是會隨著用戶互動而產生變化的特性。
- 例如:
7.關於Props:
(1)state 和 props 主要的區別在於 props 是不可變的,而 state 可以根據與用戶交互來改變。這就是為什麽有些容器組件需要定義 state 來更新和修改數據。 而子組件只能通過 props 來傳遞數據
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById(‘example‘)
(2)Props驗證:
Props 驗證使用 propTypes,它可以保證我們的應用組件被正確使用,React.PropTypes 提供很多驗證器 (validator) 來驗證傳入數據是否有效。當向 props 傳入無效數據時,JavaScript 控制臺會拋出警告。
以下實例創建一個 Mytitle 組件,屬性 title 是必須的且是字符串,非字符串類型會自動轉換為字符串 :
var title = "菜鳥教程";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById(‘example‘)
);
8.獲取真實的DOM:
組件並不是真實的 DOM 節點,而是存在於內存之中的一種數據結構,叫做虛擬 DOM (virtual DOM)。只有當它插入文檔以後,才會變成真實的 DOM 。
有時需要從組件獲取真實 DOM 的節點,這時就要用到 ref 屬性。
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } });為了獲取真是DOM節點,html元素必須有一個 ref 屬性,然後 this.refs.[refName] 就會返回這個真實的 DOM 節點。需要註意的是,由於 this.refs.[refName] 屬性獲取的是真實 DOM ,所以必須等到虛擬 DOM 插入文檔以後,才能使用這個屬性,否則會報錯
2017.11.30 React基礎語法之一組件