React入門-3.組件

1. 組件介紹

組件容許咱們將UI拆分爲獨立的、可重用的部分，並獨立地考慮每一個部分。

2. 組件定義

2.1. 函數組件

定義個組件的最簡單的方式就是寫一個Javascript函數。該函數接受一個對象做爲參數(咱們稱之爲props,該參數爲只讀參數)，而且返回一個React Element

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.2. 類組件

2.2.1 組件類中的方法：

1. render() 主要渲染返回，用於返回一個React Component
2. constructor(props) 構造函數方法，該方法中必須顯式調用super(props)
3. componentDidMount() 組件掛載時的鉤子函數
4. componentWillUnmount() 組件卸載時的鉤子函數

2.2.2 組件類中的屬性:
state:用於維護實例變量，全部的方法均可以訪問該實例變量中的值。實際上這就組成了一個閉包。在使用state的時候須要明確幾點

1. 不要試圖直接修改state的值，而是經過setState方法。只能在構造函數中對state進行賦值操做

   // Wrong
   this.state.comment = 'Hello';
   // Correct
   this.setState({comment: 'Hello'});

2. state狀態的更新多是異步的，能夠使用另一種方式修改state的值

   // Correct
   this.setState((state, props) => ({
       counter: state.counter + props.increment
   }));

2.2.3 數據流向下傳遞:

2.2.4 類組件示例

class Welcome extends React.Component {
      //構造函數，在構造函數第一行要調用super
      constructor(props){
        super(props);
        this.state = {date:new Date()}
      }
      //組件綁定的時候設置間歇調用，每隔一秒鐘修改date值
      componentDidMount(){
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
      //組件卸載時取消簡寫調用
      componentWillUnMount(){
        clearInterval(this.timerID);
      }
      //修改date值
      tick(){
        this.setState({
          date: new Date()
        });
      }
      //渲染，當state中的值發生變化的時候DOM中對應的值也會發生變化
      render(){
        return <h1>hello {this.state.date.toLocaleTimeString()}</h1>
      }
    }

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

4. 組件使用

4.1 組件定義好了，經過標籤來調用組件，而且組件屬性能夠被設置到props中。

function Welcome(props){
      return <h1>hello {props.name}</h1>
    }

    const dom = <Welcome name='terry'/> 
        ReactDOM.render(dom, document.getElementById('app')
    );

4.2 組件嵌套使用

//定義Welcome組件
    function Welcome(props){
      return <h1>hello {props.name}</h1>
    }
    //在App中使用Welcome組件
    function App(props){
      return (
        <div>
          <Welcome name='terry'/> 
          <Welcome name='larry'/> 
          <Welcome name='tom'/> 
        </div>
      );
    }
    //
    const dom = <App/> ;
    ReactDOM.render( dom,document.getElementById('app'));