react学习01

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>
    );
  }
}