初級React入門

1、引入Reactjs

方法一：直接下載相關js文件引入網頁，其中react.js 是 React 的核心庫，react-dom.js 是提供與 DOM 相關的功能，Browser.js 的做用是將 JSX 語法轉爲 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。

<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

方法二:經過前端架構工具，好比 browserify 或 webpack。使用 react和 react-dom npm 包.

var React = require('react');
var ReactDOM = require('react-dom');

 

2、基本原理

一、建立組件

var Component=React.createClass({
  render:function(){
    return (
      <div className="box">
        <h2>我是一個標題</h2>
        <contentInfo />//子組件     
      </div>    
    )    
  } 
})   

二、渲染組件（組件名稱，要插入的節點）

ReactDOM.render(<Component />, document.getElementById('app'));

三、組件的狀態，狀態改變組件將從新渲染

getInitialState: function() {
  return {liked: false};
}

四、組件的數據交互

用this.props獲取組件傳遞過來的數據

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

設置ref值，方便後續使用React.findDOMNode方法獲取虛擬dom

var MyComponent = React.createClass({
  handleClick: function() {
    var TextInput=React.findDOMNode(this.refs.myTextInput);
    TextInput.value="clicked";
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
});

ReactDOM.render(<MyComponent />,document.getElementById('example'));

  五、組件的生命週期（初始化、運行中、銷燬） 

//初始化階段函數介紹
getDefaultProps();//只調用一次，實例以前共享引用
getInitialState();//初始化每一個實例特有的狀態
componentWillMount();//render以前最後一次修改狀態的機會
render();//只能訪問this.props和this.state，只有一個頂層組件，不容許修改狀態和DOM輸出
componentDidMount();//成功render並渲染完成真實DOM後觸發，可修改DOM

//運行中階段函數介紹
componentWillReceiveProps();//父組件修改屬性觸發，能夠修改新屬性和狀態
shouldComponentUpdate();//返回false會阻止render（提高性能）
componentWillUpdate();//不能修改屬性和狀態
render();//同初始化函數render
componentDidUpdate();//同初始化函數componentDidMount

//銷燬階段函數介紹
componentWillUnmount();//在刪除組件前進行清理操做，好比計時器和事件監聽器