React

 // React组件没有全局注册和局部注册的概念，官方推荐以ES6的class来创建组件，调用通过import导入组件实例
import React from "react";
class Demo extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };
        // ES6 类中函数必须手动绑定，也可在调用的时候绑定，或者通过箭头函数
        this.handleChange = this.handleChange.bind(this); 
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
            value={this.state.text} />
            </div>
        );
    }
}
export default Demo;


// Reac的props更多的相对state而言，只有props无state的组件叫无状态组件，即在组件的定义中可以只有一个render方法，无生命周期概念，组件不用实例化。
// 父组件更新子组件的props，在子组件接收到新的props时, 通过在componentWillReceiveProps()生命周期中执行this.setState()来更新视图，但不会引起第二次渲染。

React父子组件通信(){
    // React实例没有事件接口，一般会通过引入一个第三方插件来实现，但是父子组件的通信可以通过props来实现，在父组件中传递callback的prop形式，然后在子组件中触发此回调
    // 子组件
    // class Child  extends Component { 
    //     handle (e) {    
    //     //回调函数传递参数给父组件
    //     this.props.onChange(e.target.value);
    //     }
    //     render(){
    //     return(
    //         <input type="text" onChange={this.handle.bind(this)}>
    //         )
    //     }
    // }
    
    {/* //父组件 */}
    // class Parent extends Component{ 
    //     constructor(props){
    //     super(props);
    //     this.handleChildChange=this.handleChildChange.bind(this);
    //     }
    //     handleChildChange(value){
    //     if(value){
    //             this.setState({value:value});
    //     }
    //     }
    
    //     render() {
    //         return (
    //         < Child onChange={this.handleChildChange} ></Child>
    //             )
    //     }
    // }
}

function 生命周期() {
    // Mounting：已插入真实 DOM
    // Updating：正在被重新渲染
    // Unmounting：已移出真实 DOM
    // 生命周期的方法有：
    // componentWillMount 在渲染前调用,在客户端也在服务端。
    // componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
    // componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    // shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    // 可以在你确认不需要更新组件时使用。
    // componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    // componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
    // componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。
}