关于react脚手架

1.react脚手架：
(1)Npm install react --save
(2)Npm install react-dom --save
(3)Npm install react-router-dom --save
(4)Npm install create-react-app -g
(5)Create-react-app 名字
(6)Npm run eject
(7)Npm start
2.组件：
(1)作用：
①渲染HTML元素
②封装：可重复使用代码
(2)三种：
①函数式：无状态组件：
function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)
1.组件不会被实例，整体渲染性能得到提升
2.组件不能访问this对象
3.组件无法访问生命周期的方法
4.Prop不能用this.props调用

②Es5原生：react.createClass
1)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> ); } });
③Es6:react.Component
1)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> ); } }

Es6与es5的区别：
This
Es6不会自动绑定this但Es5会
3.Es6中React.Component绑定this的方法：
1.在constructor里添加：this.函数名=this.函数名.bind(this)
2.<div onClick={this.函数名.bind(this)}></div>
3.<div onClick={()=>{this.函数名()}}></div>
4.函数名=()=>{}
4.react 遍历为什么要key:
(1)提高性能
(2)通过虚拟dom与真实dom比较做判断
(3)能快速捕获改变的数据