三個重要概念點

• 組件 return()的返回節(jié)點必須是一個，所以有多個節(jié)點時，用一個大節(jié)點包起

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';

class Index extends React.Component{
  render(){
    return (
      <div>                                                      #用 div 包起多個節(jié)點
        <ComponentHeader />
        <h2>頁面的主體內(nèi)容</h2>
      </div>
    );
  }
}

• 可以給外部使用的組件要加上export default

import React from 'react';
import ReactDOM from 'react-dom';

#這個組件要供給 Index 組件使用，所以加上export default
export default class ComponentHeader extends React.Component{       
  render(){
    return (
      <header>
        <h1>這里是頭部</h1>
      </header>
    );
  }
}

• 入口定義：ReactDOM.render(<Index/>, document.getElementById('example'),輸出給 html 的最終入口點

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';

class Index extends React.Component{
  render(){
    return (
      <div>
        <ComponentHeader />
        <h2>頁面的主體內(nèi)容</h2>
      </div>
    );
  }
}

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

多組件嵌套

-組件可以以參數(shù)的形式傳遞

var React = require('react');
var ReactDOM = require('react-dom');
import ComponentHeader from './components/header';
import ComponentFooter from './components/footer';
import BodyIndex from './components/BodyIndex';

class Index extends React.Component{
  render(){

    var component;            #這里模擬了用戶登錄的情況，以判斷結(jié)果選擇不同的組件進(jìn)行傳入。
    if(用戶已登錄) {
      component = <ComponentLoginHeader />
    }
    else {
      component = <ComponentHeader />
    }

    return (
      <div>
        {component}
        <BodyIndex />
        <ComponentFooter />
      </div>
    );
  }
}

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

JSX內(nèi)置表達(dá)式(更多去看文檔)

• 使用三元表達(dá)式進(jìn)行判斷
  下例中的：{userName == '' ? ' 用戶沒有登錄' : '用戶名： ' + userName} 用?判斷 boolean 值，用:的前后來執(zhí)行判斷
• 標(biāo)簽屬性的表達(dá)式
  下例中的：<input type='button' value = {userName} disabled={boolInput}></input> ,表達(dá)式可以不用引號包裹
• 注釋的寫法{/* 注釋 */}

import React from 'react';
import ReactDOM from 'react-dom';

export default class BodyIndex extends React.Component{
  render(){

    var userName = "emilesu";
    var boolInput = false;

    return (
      <div>
        <h2>這里是主體內(nèi)容</h2>
        <p>{userName == '' ? '用戶沒有登錄' : '用戶名: ' + userName }</p>
        <p><input type='button' value = {userName} disabled={boolInput}></input></p>
        {/*
          1.這里是注釋
          2.這里是注釋
          3.這里是注釋
          */}
      </div>
    );
  }
}

生命周期函數(shù)

生命周期函數(shù)的作用，是在組件起始過程的不同階段內(nèi)，可以通過調(diào)用生命周期函數(shù)，插入響應(yīng)不同的動作。

image.png