From 624aa4cad725523a55cc73de27dd939ad5c9dff9 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 12 Feb 2019 16:54:26 +0800 Subject: [PATCH] =?UTF-8?q?update:JSX=E8=AF=AD=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 13-React基础/02-JSX语法介绍.md | 105 ++++++++++++++++++++++++++++----- 1 file changed, 90 insertions(+), 15 deletions(-) diff --git a/13-React基础/02-JSX语法介绍.md b/13-React基础/02-JSX语法介绍.md index 3e4df82..6af84b0 100644 --- a/13-React基础/02-JSX语法介绍.md +++ b/13-React基础/02-JSX语法介绍.md @@ -25,7 +25,7 @@ JSX：JavaScript XML，一种类似于XML的JS扩展语法。也可以理解成 运行 cnpm i babel-preset-react -D ``` -我们可以通过这个babel包，将 JSX语法 转换为 JS语法。 +这个babel包的作用是：将 JSX语法 转换为 JS语法。 安装完成后，就可以开始使用JSX语法了。 @@ -233,7 +233,6 @@ React在解析所有标签的时候，是以标签的首字母来区分的：如 **结论**：组件的首字母必须大写。 - ### 父组件传值给子组件 代码举例： @@ -288,20 +287,8 @@ React在解析所有标签的时候，是以标签的首字母来区分的：如 ``` - 上方代码中，我们是想把整个person对象传递给子组件，所以采用了`...Obj 语法`语法。传递给子组件后，子组件获取的数据仅仅只是可读的。 -### 以文件夹的形式创建子组件 - -在实际开发中，我们通常会专门新建一个 components 文件夹，来定义子组件。 - -文件结构如下： - -代码如下： - -（1）components/hello.jsx: - - ## class 关键字的介绍 面向对象语言的三个特性：封装、继承、多态。多态 和 接口、虚拟方法有关。 @@ -310,7 +297,6 @@ React在解析所有标签的时候，是以标签的首字母来区分的：如 myclass.js: - ```javascript // 以前学习的：使用构造函数创建对象 function Person(name, age) { @@ -393,6 +379,9 @@ c1.say(); ``` +注意上方 `constructor`处的注释：当使用 extends 关键字实现了继承， 子类的 constructor 构造函数中，必须显示调用 super() 方法，这个 super 表示父类中 constructor 的引用。也就是说，在子类当中，要么不写 constructor，如果写了 constructor，就一定要把 `super()`也加上。 + +为啥我们要引入 `class`这个功能？就是因为， `class`里，永远都存在着一个 constructor。我们可以利用 `constructor`做很多事情。 ## 创建组件的第二种方式：使用 class 关键字 @@ -452,6 +441,92 @@ index.html: ``` +### 父组件传值给子组件 + +代码举例： + +index.html: + +```html + + + + + + + Document + + + + + + + +
+ + + + + + +``` + +## 方式一和方式二的对比 + +上面的内容里，我们使用了两种方式创建组件。这两种方式，有着本质的区别，我们来对比一下。 + +**对比**： + +- **方式一**：通过 function构造函数 创建组件。内部没有 state 私有数据，只有 一个 props 来接收外界传递过来的数据。 + +- **方式二**：通过 class 创建子组件。内部除了有 this.props 这个只读属性之外，还有一个专门用于 存放自己私有数据的 this.state 属性，这个 state 是可读可写的。 + +基于上面的区别，我们可以为这两种创建组件的方式下定义： 使用 function 创建的组件，叫做【无状态组件】；使用 class 创建的组件，叫做【有状态组件】。 + +**本质区别**： + +有状态组件和无状态组件，最本质的区别，就是有无 state 属性。同时， class 创建的组件，有自己的生命周期函数，但是，function 创建的 组件，没有自己的生命周期函数。 + +**什么时候使用 有状态组件，什么时候使用无状态组件**： + +- （1）如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行不同的业务逻辑，此时，非常适合用 class 创建出来的有状态组件。 + +- （2）如果一个组件，只需要根据外界传递过来的 props，渲染固定的页面结构即可的话，此时，非常适合使用 function 创建出来的无状态组件。（使用无状态组件的小小好处： 由于剔除了组件的生命周期，所以，运行速度会相对快一点点）。 + + +