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 插入文檔之後，才能使用這個屬性，不然會報錯