初学react

React特点：

声明式设计；建议使用JSX来描述用户界面;构建组件；单向响应的数据流；

JSX:JSX是一种JAVASCRIPT的语法扩展，元素是构成react的最小单位，JSX就是用来声明REACT中的元素的。

1.指定属性：JSX可以用引号来指定已字符串为值的属性；const element = <div tableIndex = "0"></div>

　　　　　　JSX可以用大括号来定义以javascript表达式为值的属性；const element = <div>{name}</div>    小驼峰命名；

2.嵌套格式：JSX像HTML一样，闭合标签，也可以相互嵌套；

　　　　　　const element = ( <div> <img src="***"/></div>)

3.使用表达式： 在JSX中可以任意使用javascript表达式，但要放在大括号里；同时在JSX代码的外面加一个小括号，防止分号自动插入的bug;不可以写语句；

　　　　　const element = ( <div>  <h1>{ hi,{format(createTime)}}</h1></div>)

　　　　　可以在if或for里面使用，将他赋值给变量，当作参数传入，也可以作为返回值；

function gettingData(user){
  if(user){
  　return <h1>hello,{format(user)}</h1>      
　}else{
　　return <h2>hello,stranger!</h2>
　}
}

4.防注入攻击： 所有的内容在渲染之前都被转换成字符串了，这样可以有效防止XSS。

5.表示对象： Babel转译器会把JSX转换成一个名为React.createElement()的方法调用；

　　以下两段类似：

　　const element = (<div> <h1 className="getting">hello</h1></div>)

　　React.createElement('h1', {className: 'getting'}, 'hello')

安装：

通过NPM使用react，安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
使用creat-react-app快速构建React开发环境；creat-react-app自动创建的项目是基于webpack+ES6;

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start


入口文件：index.js
大写字母开头的都是组件；
在index.js中引入React库，使浏览器能够理解组件的语法，ReactDom库的意义在于将组件挂载到DOM节点上。
JSX一定要放在一个大的div中；
事件绑定：onClick={this.handleBtnClick},this指向这个组件；
constructor(props){
　　super(props)
　　this.state = {
　　　　list: []
　　}
}
如果要用到state中的值，需要在方法中用展开运算符展开内容,不直接操作state中的值；list: [...this.state.list];
在方法中直接用，不用加this，在JSX中用this.state.list;
this.setState((prevState, props) => {isCollepes: prevState.isCollepes}),setState（）可以接受一个函数，这个函数接受两个参数，第一个参数表示上一个状态，第二个函数表示当前的props;

父子传参：
父传子：通过属性传参，content = {item},
在子组件用this.props.content接收；
子传父：要调用父组件传来的方法，在父组件通过创建事件句柄，并作为prop传递到子组件；
　　父组件：return <TodoItem delete={this.handleDelete.bind(this)}/>   handleDelete(index){};
　　子组件：<div onClick={this.handleDelete.bind(this)}></div>  
 　　　　handleDelete(){this.props.delete(this.props.index)} 此时，子组件将index传给了父组件，父组件中handleDelete函数中可以获取到；
父组件向子组件传事件：
　　在父组件的子标签中，定义事件<Person myClick={this.handleClick.bind(this, '此值')}></Person>;
　　在子组件中，<div onClick={this.props.myClick}></div>

代码优化：
在constructor中做事件中的this指向的处理,如：this.handleInput = this.handleInput.bing(this)
render函数中外层包裹的标签可以不用div空标签，换成<Fragment></Fragment>,前提是要引入{Component};

如果要获取父组件中子标签中的内容，可以在子组件中使用this.props.children;