安装npm
yarn和npm命令对比
Npm | Yarn |
---|---|
npm install | yarn install |
npm install [package] | yarn add [package] |
npm install --save [package] | yarn add [package] |
npm install --save-dev [package] | yarn add [package] [-dev/-D] |
npm rebuild | yarn install --force |
npm uninstall [package] | yarn remove [package] |
npm uninstall --save [package] | yarn remove [package] |
npm uninstall --save-dev [package] | yarn remove [package] |
npm uninstall --optional [package] | yarn remove [package] |
npm clean cache | yarn remove [package] |
rm -rf node_modules && npm install | yarn upgrade |
利用脚手架创建React项目
安装create-react-app命令
npm install -g create-react-app
创建react项目
create_react_app 02_learn_scaffold
启动react项目
cd 目录
yarn start
目录结构分析
React组件化
分而治之的思想
- 人面对复杂问题的处理方式:
- 任何一个人处理信息的逻辑能力都是有限的
- 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。
- 但是,我们人有一种天生的能力,就是将问题进行拆解。
- 如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解
- 其实上面的思想就是分而治之的思想:
- 分而治之是软件工程的重要思想,是复杂系统开发和维护的基石;
- 而前端目前的模块化和组件化都是基于分而治之的思想;
什么是组件化开发
- 组件化也是类似的思想:
- 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
- 但如果,我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
- 我们需要通过组件化的思想来思考整个应用程
序:- 我们将一个完整的页面分成很多个组件;
- 每个组件都用于实现页面的一个功能块;
- 而每一个组件又可以进行细分;
- 而组件本身又可以在多个地方进行复用;
React的组件化
- 组件化是React的核心思想,也是我们后续课程的重点,前面我们封装的App本身就是一个组件:
- 组件化提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都会被抽象成一颗组件树。
- React的组件相对于Vue更加的灵活和多样,按照不同的方式可以分成很多类组件:
- 根据组件的定义方式,可以分为:函数组件(Functional Component )和类组件(Class Component);
- 根据组件内部是否有状态需要维护,可以分成:无状态组件(Stateless Component )和有状态组件(Stateful Component);
- 根据组件的不同职责,可以分成:展示型组件(Presentational Component)和容器型组件(Container Component);
- 这些概念有很多重叠,但是他们最主要是关注数据逻辑和UI展示的分离:
- 函数组件、无状态组件、展示型组件主要关注UI的展示;
- 类组件、有状态组件、容器型组件主要关注数据逻辑;
类组件
- 定义类组件的要求:
- 组件的名称的首字母必须是大写的(无论是类组件还是函数组件)
- 类组件需要继承自React.Component;
- 类组件必须实现render函数
函数式组件
- 没有this对象;
- 没有内部状态(hooks);
- 没有生命周期,也会被更新并挂载,但是没有生命周期函数;
render函数的返回值
当 render 被调用时,它会检查 this.props 和 this.state 的变化并返回以下类型之一:
- React元素:
- 通常通过 JSX 创建;
- 例如 div 会被 React 渲染为 DOM 节点, 会被 React 渲染为自定义组件;
- 数组或 fragments:使得 render 方法可以返回多个元素。
- Portals:可以渲染子节点到不同的 DOM 子树中。
- 字符串或数值类型:它们在 DOM 中会被渲染为文本节点
- 布尔类型或 null:什么都不渲染。