1.函数式无状态组件

2.es5方式React.createClass组件 

3.es6方式extends React.Component

区别:

    无状态组件无法进行数据的操作 es5的它是利用function模拟class的写法做出来的es6 是通过es6新增class的属性创建的组件此组件创建简单

1.函数式无状态组件

    语法:

    function HelloComponent(props){

        return <div> Hello {props.name}</div>
    }

    ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

2.es5方式React.createClass组件

   语法:

    var InputControlES5 = React.createClass({

    propTypes: {//定义传入props中的属性各种类型        

        initialValue: React.PropTypes.string

    },

    defaultProps: { //组件默认的props对象       

         initialValue: " "

     },

    // 设置 initial state    

    getInitialState: function(){//组件相关的状态对象        

        return {

            text: this.props.initialValue || 'placeholder'      

         };

    },

    handleChange: function(event){

        this.setState({ //this represents react component instance       

             text: event.target.value

        });

    },

    render: function(){

        return (

           <div>

                Type something:

                    <input onChange={this.handleChange} value={this.state.text} />

            </div>

            );

    }

});

InputControlES6.propTypes = {

    initialValue: React.PropTypes.string

};

InputControlES6.defaultProps = {

    initialValue: ''

};

3.es6方式extends React.Component

class InputControlES6 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>

        );

    }

}

InputControlES6.propTypes = {

    initialValue: React.PropTypes.string

};

InputControlES6.defaultProps = {

    initialValue: " "

};

区别:

    无状态组件无法进行数据的操作 es5的它是利用function模拟class的写法做出来的es6 是通过es6新增class的属性创建的组件此组件创建简单

参考网址:https://www.cnblogs.com/wonyun/p/5930333.html

1、如何提高网页性能？

文件路径:http://bbs.daxiangclass.com/?thread-7.htm

demo:https://www.jianshu.com/p/ae7e66ff1cb5

2、react定义组件的方法有哪些？区别是什么？

文件路径:http://bbs.daxiangclass.com/?thread-81.htm

demo:https://www.jianshu.com/p/7c3d17971dfb

3、canvas与svg的区别？

文件路径:http://bbs.daxiangclass.com/?thread-280.htm

demo:https://www.jianshu.com/p/26dd0c9769b3

4、jquery的优点？

文件路径:http://bbs.daxiangclass.com/?thread-10.htm

demo:https://www.jianshu.com/p/1667d2c20cf5

5、小组demo

1). 利用sort将字母排序

    demo:https://codepen.io/nian1016/pen/jpejKd?editors=1111

2).快速排序 递归

demo:https://codepen.io/nian1016/pen/MBPMxg?editors=1111