认识
传统模式->服务器/用户输入的交互数据->动态反应到复杂页面
存在的问题:代码量越来越大,难以维护,力不从心。
Angular.js(MVVM):不适合用于性能要求比较高的框架,不利于重用,比较复杂。
react的优势:
1、react不是一个完整的MVC,MVVM框架
2、react跟Web Component不冲突
3、react的特点就是'轻'
4、组件化的开发思路(重点)
tip:语法糖(糖衣语法),是指计算机语言中添加某种语法,对语言的功能并没有影响,只是增加程序可读性,减少出错机会。
tip:JSX,javascript XML
5、JSX的特点
类似XML语法,容易接受
增强js语义
结构清晰
抽象程度高
代码模块化
6、JSX解释架构
入口函数-->多个模块-->解析JSX-->执行js
注意事项:
render方法中返回的HTML代码只能有一个根节点
render方法返回的HTML代码中标签的class属性应该写为className,for属性也应该写为htmlFor
使用React.createClass创建的组件名第一个字母必须大写
应用场景
1、复杂场景下的高性能
2、重用组件库,组件组合
生命周期
1、mounting
getDefaultProps()
getInitialState()
componentWillMount
render
conponentDidMount
2、undating
componentWillReceiveProps(setPros)
shouldComponentUpdate(setState)
componentWillUpdate
render
componentDidUpdate
3、Unmounting
componentWillUnmount
tip:组件的state是可变的,props是不变的(一次复制)
tip:reate采用驼峰式书写变量、函数、事件
事件
如何绑定事件?在标签内使用驼峰式命名onCLick
如何获取子组件?在子组件中声明ref,方法中通过React.findDomNode(this.refs)