React 入门 概念解释

记录自己的学习过程，纯干货~

一、项目初始化

在（要新建项目的位置目录下）终端中打开<可以直接在文件夹用cmd 或 VSCode中打开>

-输入 npx create-react-app my-project-name 搭建项目（需要些时间）

-输入 cd my-project-name 进入项目目录

-输入 npm start 启动项目，可以通过给到的网址在浏览器中预览

 

---

二、安装插件（非必须）

（1）react开发者工具的浏览器插件：

React Developer Tools – React根据使用的浏览器进行下载对应的版本。

如何使用：得要先切换到使用了React的页面，点击f12.，就会发现菜单栏比普通的多了components和profiler

（2）VSCode代码格式化插件——Prettier

（3）VSCode 中使用idea中的快捷键——IntelliJ IDEA Keybindings
                Alt+enter 提示导入组件文件的import内容

---

三、重点笔记

1. 状态 

※ 能够使得重新调用组件函数的两种方法：

        ①Props发生改变

        ②State发生改变

        ☆ 函数组件本身是“无状态”的，这句话怎么理解呢，首先从上面的内容我们能得到一个前提，就是一旦props改变，该组件函数就会被重新调用，但是即使重新执行一遍这个函数也无法更新页面中的值，因为它依然会按第一次调用时的逻辑顺序再执行一次，返回结果依然没变！所以两次根本没有区别。所以叫做“无状态”。
        ☆ 因此唯一的能够使页面内容发生改变，也就是将组件函数变成“有状态”的方法就是，state变化引起的重新调用组件函数。而它之所以能做到这一点，就是因为这个state保存的位置在函数之外（在FiberNode）。这样才做到了不受函数本身逻辑的影响，否则又变成原值了。

        useState是将返回值给到了一个数组变量，而为了书写方便，将数组解构(解释见零星笔记1)才形成了[data, setData]的这种写法。

        到这里，很容易发现用state来修改变量值有一个硬伤，一旦state改变，就会调用组件函数，一旦调用组件函数，又会重新修改state，再重新调用组件函数，再..........

2. Hooks

组件函数的主要目的是——渲染生成html的元素，所以，所有除了“渲染”这一个操作以外的所有其他功能(eg. 获取数据、管理状态...)都成为副作用(不是贬义的，而是指额外的，次要的)。

而React中，所有以use开头的方法，都是为了副作用而生，称为Hooks。

3. useEffect

useEffect方法有两个参数：

参数1为一个箭头函数（副作用），会在 return之后，但是真正渲染之前 自行调用

参数2的填写有三种情况：

        ① 不填，那么每次调用组件函数时，都会执行一遍箭头函数，和单纯使用useState一样的结果，都会陷入循环，执行函数..换变量..执行函数..换变量..执行函数.........

        ② 填[ ]，仅第一次执行箭头函数，后续不再执行

        ③ 填[ 变量名(依赖项) ]，该变量变化时，都会执行箭头函数，其他情况不执行

4. UseContext

        当多个互相之间有关系的组件需要用到相同的数据时，为了避免需要所有组件函数都加上一样的输入参数的情况（因为每个都写一遍太麻烦啦），就有了useContext，它能够让所有组件函数共享一组数据。因为数据是设在“上下文”的，所以在需要使用的地方使用useContext就能从“上下文”中获取数据。（其实就是有点像一个类中的所有方法都能共享类中的属性一样的存在）

        因为是共享的，所以设置初始值的时候要写在所有函数的外层。初始值设置的时候，用的是createContext方法。而useContext仅用于读取变量的值。

5. 遍历

        在遍历生成多个格式相同的组件时，在React中并没有for的操作，而是使用map函数，对数据中的每条数据都生成一个组件。

        要注意的是遍历时每一条数据都要加一个唯一的key以区分。

        Datas.map(d=><Component data={d} key={d.id}></Component>)

---

四、JS零星笔记

1. 解构

解构（Destructuring）是一种方便的方式，通过一种更简洁和优雅的语法，从对象和数组中提取值并赋值给变量。这种技术可以以一种更易读的语法方式，将对象和数组中的值解构为独立变量。

（1）对象解构

const person = { name: 'Alice', age: 30 };
const { name, age } = person;

Result：name==‘Alice’ age==30

（2）数组解构

const numbers = [1, 2, 3];
const [a, b, c] = numbers;

Result: a=1 b=2 c=3

2. 模板字面量

模板字面量（Template Literals）是一种字符串表示方式，使用反引号（``）包裹字符串内容，通过${}来插入变量或表达式。

${ }是一种占位符的编程方式，在运行时会直接被变量替换值。

※一般在以下情况使用：

1. 创建多行字符串，或书写HTML（反引号中每个空格都算数，所以不需要用\n进行换行）
2. 在字符串中嵌入任何js表达式
3. 需要动态生成字符串内容

---

五、注意事项

1. 路径问题

（1）相对路径：以.或者..开头

        导入样式：import ‘相对路径.css’

        导入组件：import 自定义组件名 from ‘相对路径(不用加扩展名)’

（2）node_module下路径：直接以名称开头

        导入库：import 库名 from ’node_module下路径’

（3）public下图片路径：以/开头

2. 命名问题

        HTML自带的标签名都是小写，自创的组件名要用大驼峰命名

        每个组件的属性名用小驼峰