React基础学习

create-react-app 项目名称(不要使用中文 必须先npm安装这个工具)

• create-react-app 创建项目

• npn start运行起来一个项目

• npx 是不是一定要写？不是，npx 是可选的。

JSX

概念

JSX -> 是一种JavaScript的语法扩展，拓展了 XML 写法。

JS -> JavaScript

X -> XML 标记语法

一句话总结JSX就是：直接在 JS 编写标签。

在 Vue 中有模板语法 v-for v-if ，React 中没有。

React 中如何实现 HTML 的结构编写，直接写就可以了，因为 React 允许直接在 JS 文件中写 HTML 代码。

const tag = <div>标签</div>;    在 React 中是合法的

字符串标签和JSX标签

// 类似 JS 中摸板字符串写法
const htmlStr = `<div>字符串</div>`;

// 在 React 中，标签就是一个特殊封装过的对象。
const tagObject = <div>标签对象</div>;

console.log(htmlStr, typeof htmlStr);
console.log(tagObject, typeof tagObject);

dangerouslySetInnerHTML的简单使用 属性用于渲染 html 字符串

<div dangerouslySetInnerHTML={{__html: textString}}></div>

其他补充

• 多个属性可以直接用对象表示，再 标签中 用 ... 解构绑定。

• 自定义标签属性，需要写成 { 'data-xxx': 值 }

• npx 概念

npx 是 npm 的 package 执行工具，是 npm 5.2 版本以上附带的。

传统：npm 创建 React 项目

1. 安装 React 脚手架工具。npm install -g create-react-app
2. 使用脚手架工具创建 React 项目。 create-react-app 项目名称

新写法：npx 创建 React 项目

npx 可直接创建 React 项目，npx 命令直接省略了安装脚手架工具的过程。

yarn概念

相同点：yarn 和 npm 一样 都是 node 的 包管理器。

1. npm 就像是 电脑上的 软件管家 => 360软件管家
2. yarn 就像是 电脑上的 软件管家 => 腾讯软件管家

不同点：yarn 和 npm 的包下载地址不一样，使用的命令也区别。

为什么需要深拷贝。

1. shouldComponentUpdate 生命周期函数内部需要比较新旧两个 list 数据
2. 如果只是简单的解构赋值操作， 只是引用了 state.list 的内存地址。
3. 内存地址相同，数据就比较不出来新旧，所以需要深拷贝生成新的对象内存地址。
4. 这部分有点绕，可结合老师画的内存图去理解。

• Web项目：JS 中的数据的操作其实不占什么内存。
• DOM 操作 - DOM元素的增删改查。
• 所以列表渲染一定要设置合适的 key 值。

局部样式注意事项

1. 不要在局部样式中，直接使用标签选择器，标签选择器不会处理，统一使用类名。
2. 如果是组合词，建议用下划线链接如 header_body 或者用驼峰命名 headerBody 写法。