React.js 入门
This project was bootstrapped with Create React App.
组件
React组件就是网页上的一部分,大写字母开头。 它是一个JS类,继承自React.Component。 必须有一个render()函数,返回要渲染的内容。
ReactDOM.render()负责把组件渲染到HTML节点上。
JSX语法
标签形式的语法结构。 在JSX里面写js表达式(只能写JS表达式,不能写JS语句),需要加大括号。
组件之间的通信
- 父组件与子组件通信 父组件通过属性,向子组件传递参数。子组件通过this.props接受参数。 (key不会传)
- 子组件与父组件通信 通过this.props, 子组件调用父组件传过来的函数。
实现TodoList组件
- 增加任务
- 删除任务
- 样式优化
React**,操作数据而非操作DOM,操作DOM让react来做。
state 存组件的数据,改变state用setState()函数。此时,state变换后,组件会自动刷新!!!
循环展示每一项时,key值~
代码优化
- .bind(this)
- 组件同名, this.setState可以只写一个参数~
- React.Fragment标签包裹~不要用div
添加样式
- 行内样式,{{}}, 内层表示JS对象。
- JSX样式类,用className。