读《React快速上手开发》

React.DOM对象,可以将HTML元素当作它的属性,变成React组件使用。
ReactDOM:渲染的一种途径,还可以有canvas等

在定义html元素的属性(例如id)时,注意class、for不能直接使用,因为他们都是js中的关键字,取而代之的是className和htmlFor。
设置行内样式style,不能用字符串了,避免跨站脚本攻击,而是使用js对象(键值),此时属性名(键)用驼峰写法。

关于组件:
1、创建新组件:
var myComponent = React.createClass({此处为:一个包含render()方法、其他方法以及属性的js对象 });
2、使用该新组件:
React.createElement(新组件名)
另一种方法是使用工厂方法

通过this.props对象传递变量的值
propTypes:限制输入变量的类型等
getDefaultProps()方法返回一个对象,包含可选参数的默认值

一般而言,调用setState()时,React会调用render()并更新界面。

关于事件处理:
传统方式:以点击事件为例
1)内联设置onclick;2)某元素.addEventListener( )
缺点:兼容问题写起来代码冗长
React:使用了驼峰写法,无需考虑兼容问题

关于生命周期:
componentWillMount:render之前
componentDidMount:render之后

state改变
componentWillUpdate:
componentDidUpdate:

mixin:代码复用

子组件在父组件之前装载并更新
子组件和父组件之间传值用props

****一个比较重要的生命周期的方法
shouldComponentUpdate(nextProps, nextState)
这个方法在componentWillUpdate()之前调用,可以控制是否render
优化性能

React的性能优化:
1、轻量级DOM
2、事件委托

整理一下做的excel功能:
排序:单击事件,根据列判断升序还是降序,sort
编辑:双击事件,根据state变为input元素,保存时input的值
搜索:onChange事件,indexOf判断,filter
下载:reduce,href和download属性

还有很多遗留问题和扩展点等待进一步学习!!

你可能感兴趣的:(读《React快速上手开发》)