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()把组件渲染到页面中

  1. ReactDOM.render(param1,param2);
  2. param1 <组件名称/>||<组件名称>< /组件名称>
  3. 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的主要内容,如果未能解决你的问题,请参考以下文章

react-router 学习笔记

react学习笔记-06

笔记react 学习与记录

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

react-router 学习笔记

react 学习笔记