React学习笔记1
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React学习笔记1相关的知识,希望对你有一定的参考价值。
React设计出来就是单向数据流(从服务器流向客户端),不存在页面数据和服务端数据进行绑定
通过组件化(component)去管理不同的数据流,用React开发、创建任何一个应用都是一个组件
前端组件定义:html+CSS+JS+IMG的组合体
在实际开发中,可以根据页面的布局,对页面进行拆分和组件化
特点和优势:
1.虚拟DOM(开发时不需要在页面中写任何DOM元素)
框架底层的一套DOM实现
2.JSX语法(使用javascript XML格式的语法)
是用于编写HTML内容的一个语法
3.组件化开发(React最核心的思想,是将页面中任何一个区域或者元素都看成一个组件 component)
提高复用性
4.单向数据流(组件和后端之间的数据是单向的,从后端流动到react组件中)
不会从组件流向后端
5.组件声明周期(任何一个组件在DOM中都具有一个完整的声明周期,组件初始化的时候开始,组件被移除的时候消失,从而保证性能的优越)
完善的垃圾回收机制
React使用
1.搭建框架环境
核心JS,定义虚拟DOM模型,数据更新,支持组件化算法,都在这个JS中
<script src="../build/react.min.js"></script>
操作DOM的API
<script src="../build/react-dom.js"></script>
JSX的编译器
<script src="../build/browser.min.js"></script>
2.遵循框架标准和规范
规范1:在JS文件中写React组件时,需要将这个JS文件的type指定成text/babel
<script type="text/babel"></script>
规范2:声明组件时,组件的名称首字母要大写
规范3:React.createClass({})创建组件,里面放的是一个对象, 实现对象里的render子方法,在render子方法中通过return()返回jsx语法作为页面中要显示的HTML内容
规范4:JSX(JavaScript XML),XML数据存储格式 JSX语法规范,只有一个开头节点和结束节点
规范5:声明一个组件后,通过ReactDOM.render()把组件渲染到页面中
ReactDOM.render(param1,param2);
param1 <组件名称/>||<组件名称>< /组件名称>
param2 组件被渲染的位置
Tip:
1.JSX中的注释:
{/** 注释内容 **/}
2.React中的HTML元素的class要写成className,for要写成htmlFor
创建样式的两种方式
方式1:外部CSS控制创建的元素
方式2:inner css是以object形式存在,并且object css属性要和原生JS属性一致
将样式挂载到组件的原型链上,在render函数中用this.CSS取出对象//CSS是原型链上的自定义名称
卸载组件
ReactDOM.unmountComponentAtNode(父元素);
要卸载的组件前提是被ReactDOM渲染过,所以要卸载必须先渲染
总结
1.react特点 虚拟DOM,JSX语法(开始和结束只有一个节点),组件化,组件声明周期,单向的数据流 语法:
1 React.createClass({ 2 render:function(){ 3 return:( 4 //返回的HTML内容 5 ) 6 } 7 })
2.inner css,inner js
inner css遵循原生js语法
3.事件机制
onClick,onTouchStart...
参考官方文档4.组件卸载
ReactDOM.unmountComponentAtNod(父元素);
组件必须被渲染过才能卸载
以上是关于React学习笔记1的主要内容,如果未能解决你的问题,请参考以下文章
[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段