[从零开始react002] component基本用法

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: title});
    }
    render() {
        return (<div>
                <Header changeTitle={this.changeTitle.bina(this)} title={this.state.title}/>
                <Footer />
                </div>);
    };
}

import React from "react";
import Title from "./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)}/> 
               <input value={this.props.title} onChange= {this.handleChange.bind(this)}/> 
               </div> );
    }
}

import React from "react";
export default class Title extends React.Component {
    render() {
        return(<div>
               <h2> {this.props.title}  </h2>
                </div>
        );
    }
}

这里发生了一件非常奇妙的事，我们在Layout Header Title 里都有state, 我们通过input输入框输入文字触发Layout的SetState方法， 结果所有的State里面的title都跟着变化啦，这就是virtual DOM的好处,react把操作真实DOM的操作又封装了一层，让我们不用操心哪一个DOM应该更新这种事。 JS很快，慢的只是刷新DOM里面的tree, 而且繁锁， 但是react把刷新DOM的操作透明了，简直太贴心啦。