react

react render()函数返回只能是一个标签（里面可以包其他东西）

state(状态) vs props(属性)

state 改变，视图改变，state是一个组件里面的状态，然后props是可以给一个组件添加属性方法。

可以传递到下一个组件，下一个组件通过this.props可以获得对应组件里面有多少方法和属性。

state和props一般会配合使用。

export default class Layout extends React.Component{

  constructor(){

  	super();

  	this.state = {name:'will'}

  }

  render() {

    setTimeout(() => {

      this.setState({name: 'bob'});

    }, 1000)

    return (

      <div>

       {this.state.name}

       <Header />

       <Footer />

      </div>

    );

  }

}

events，双向绑定例子

//layout.js

'use strict';

import React from 'react';

import Header from './header';

import Footer from './footer';

export default class Layout extends React.Component{

  constructor(){

    super();

    this.state = {

      name : 'will',

      title : 'helloworld'

    }

  }

  changeTitle(title){

    this.setState({

      'title' : title

    })

  }

  render() {

    return (

      <div>

       <Header title={this.state.title} changeTitle={this.changeTitle.bind(this)}/>

       <Footer />

      </div>

    );

  }

}

//header.js

'use strict';

import React from 'react';

import Title from "./header/title";

export default class Header extends React.Component{

  onChange(e){

    //e.target就是选中操作的那个Dom.然后调用原生的value属性

    const value = e.target.value;

    //这里利用props调用了父级的changeTitle方法

    this.props.changeTitle(value);

  }

  //利用props属性和state状态可以组合做很多事情，onChange

  //这里就是js的事件，可以onclick，onBlur等等

  render() {

    return (

      <div>

       <input value={this.props.title} onChange={this.onChange.bind(this)}/>

       <Title title={this.props.title} />

      </div>

    );

  }

}