[React] 08 - Tutorial: evolution of code-behind

client.js

import Layout from "./components/Layout";

const app = document.getElementById('app');　　// html的app在哪裏？
ReactDOM.render(<Layout/>, app);              // ----> 參見[對比1]，第一個參數是組件內容，第二個是掛載位置

react會根據標籤制定的位置來動態改變html內容。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorials</title>
    <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  </head>

  <body>
    <div id="app"></div>　　　　// <---- 實際上成了一個變量，也便是react會根據標籤制定的位置來動態改變
    <script src="client.min.js"></script>
  </body>
</html>

這裏是 [對比1]：

ReactDOM.render(
　　<div>
　　　　<input type="text" value={value}/>        // 注意單標籤必定要閉合「/」,不然會報錯
　　　　<button>{buttonName}</button>             // 在{}中插入變量
　　</div>,
　　document.getElementById("container")
)

(3). Louyout --> Header --> Title

將Header和Footer做爲組件單獨實現，也就是【複合組件】。

Layout.js
 
 render() {
    return (
      <div>
        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />
        <Footer />
      </div>
    );
  }

固然，Header也能夠進一步地獨立出來。

Header.js

import React from "react";
import Title from "./Header/Title";

export default class Header extends React.Component {

  handleChange(e) {
    const title = e.target.value;
    this.props.changeTitle(title);
  }

  render() {
    return (
      <div>
        <Title title={this.props.title} />
        <input value={this.props.title} onChange={this.handleChange.bind(this)} />
      </div>
    );
  }
}

Header中的標籤Title的實現處。

Title.js

export default class Title extends React.Component {
  render() {
    return (
      <h1>{this.props.title}</h1>
    );
  }
}

執行流程

Header.js

import React from "react";
import Title from "./Header/Title";

export default class Header extends React.Component {

  handleChange(e) {　　　　　　　　// e就是指：event
    // (1) 得到新的input數據
    const title = e.target.value;
    // (2) 而後改變title數據
    this.props.changeTitle(title);　　　　　　　　// 第二步：在邏輯上，虛擬DOM須要改變title, according to input
    // (3) 以後命令layout渲染
  }

  render() {
    // input中的onChange做爲listener，觸發上面的handleChange()
    return (
      <div>
        <Title title={this.props.title} />
        <input value={this.props.title} onChange={this.handleChange.bind(this)} />        //　第一步：監聽事件得到input改變
      </div> 
    ); 
  }

改變title實際幹活的地方，以下。

Layout.js

import React  from "react";
import Footer from "./Footer";
import Header from "./Header";

export default class Layout extends React.Component {
  constructor() {
    super();
    this.state = {
      title: "Welcome",
    };
  }

  changeTitle(title) {
    this.setState({title});
  }

  render() {
    return (
      <div>
        <Header changeTitle={this.changeTitle.bind(this)} title={this.state.title} />　　// 將函數指針做爲參數傳給header子組件
        <Footer />
      </div>
    );
  }
}

可見，這裏其實透露出的是一種「分離」的思想。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。