浅谈React

import React, {Component} from ‘react‘;

export  default class List extends Component{
    constructor(props){
        super(props);
        this.state = { //数据
            list:this.props.data,
        }
    }
    render() { 
        return (
            <div> 
                <ul>
                    {this.state.list.map(function(item,index){
                        return (<li key={index}>{item}</li>);
                    })}
                </ul>
            </div>
        )
    }
}

import React, {Component} from ‘react‘;
import List from ‘./list‘; //组件
import Title from ‘./title‘;//组件
export  default class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[‘Foo‘,‘Bar‘],
        }
    }
    todoList (item){
        this.state.list.push(item);
        const newList=this.state.list;
        this.setState({
            list:newList,
        })
    }
    render() {
        return (
           <div>
               <Title todoList={this.todoList.bind(this)} /> 
               <List data={this.state.list}/>
               <Title todoList={this.todoList.bind(this)} /> //复用
               <List data={[1,2,3]}/> //复用
           </div>
        )
    }
}

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

ReactElement createElement(  
  string/ReactClass type,  
  [object props],  
  [children ...]  
)  

React.createElement(
  MyButton,
  {color: ‘blue‘, shadowSize: 2},
  ‘Click Me‘
)