React学习笔记1

Posted 2020-07-25

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);
3. param1 <组件名称/>||<组件名称>< /组件名称>
5. 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(父元素);

组件必须被渲染过才能卸载