react学习

认识

传统模式->服务器/用户输入的交互数据->动态反应到复杂页面
存在的问题:代码量越来越大,难以维护,力不从心。
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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 笔记参考:阮一峰react入门教程 一、初识React 1.特点 基于组件,组件里面有自己的state,用组件来做...
    恰皮阅读 1,261评论 1 21
  • 写在前面 React入门学习笔记。 教程可参考:React 教程 | 菜鸟教程阮一峰的网络日志 > React 入...
    年少有van阅读 447评论 1 1
  • 摘要 React中的组件类似于状态机,每个组件都被设计成为在其生命周期过程中输出稳定、语义化的标签。React组件...
    桂圆_noble阅读 2,636评论 2 11
  • 官网地址https://facebook.github.io/react/docs/hello-world.htm...
    pixels阅读 741评论 0 6
  • 安装: 概述 React起源于FaceBook的内部项目,因为该公司对市场上所有的JavaScript MVC框架...
    姒沝無痕阅读 787评论 0 0

友情链接更多精彩内容