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里面使用,将他赋值给变量,当作参数传入,也可以作为返回值;
1 function gettingData(user){ 2 if(user){ 3 return <h1>hello,{format(user)}</h1> 4 }else{ 5 return <h2>hello,stranger!</h2> 6 } 7 }
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;