組件和屬性（props）

函數式組件：

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

渲染一個組件：

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById(‘root‘)
); 
 
//渲染

註意：組件名總是大寫字母開始，比如 Welcome。

組件名字可以直接用作html標簽，比如<Welcome />

ReactDom.render()

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  
 
<App />,
  document.getElementById(‘root‘)
); //第一個是App組件，返回的是html標簽。第二個是react根節點。

註意：
組件必須返回一個單獨的根元素。這就是為什麽我們添加一個 <div> 來包含所有 <Welcome /> 元素的原因。

第二個render例子：

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById(‘root‘)
);

狀態(state)和生命周期

上面介紹的組件，是函數式組件，而這種組件有限制，無法使用state，因此，第二種組件——類組件，則變得額外重要。

函數式組件轉化為類組件：

1. 創建一個繼承自 React.Component 類的 ES6 class 同名類。
2. 添加一個名為 render() 的空方法。
3. 把原函數中的所有內容移至 render() 中。
4. 在 render() 方法中使用 this.props 替代 props。
5. 刪除保留的空函數聲明。

class Clock extends React.Component {  //Clock 大寫開頭，也就是函數式組件的名字
  render() {    //多了一個render()空方法
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

註意： 現在這個Clock就是類組件了，而不是函數式組件，此時才可以使用狀態（state）。

class Clock extends React.Component {
  constructor(props) {
    super(props);  //將props傳遞給constructor構造函數，
    this.state = {date: new Date()}; // 使用constructor函數初始化this.state
  }   // 類組件應始終使用 props 調用基礎構造函數。

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(  //渲染
  <Clock />,
  document.getElementById(‘root‘)
);

生命周期鉤子：

class Clock extends React.Component {  //Clock 類組件
  constructor(props) {  //基礎構造函數，用來初始化this.state
    super(props);     //傳入props
    this.state = {date: new Date()};  //初始化
  }

  componentDidMount() {   // 掛載
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {  //卸載
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({     //更新state
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(   //調用組件
  <Clock />,
  document.getElementById(‘root‘)
);

事件：

• React 事件使用駝峰命名，而不是全部小寫。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 這個綁定是必要的，使`this`在回調中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>    //onClick 使用駝峰命名法
        {this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById(‘root‘)
);

條件渲染：

參考文檔: http://www.css88.com/react/docs/conditional-rendering.html

返回null則渲染。

react學習(一)