react——day4

 一：diffing算法

1：经典面试题

react/vue中的key有什么作用，key的内部原理是什么。为什么遍历列表时key最好不要用index

1）key的作用，

        简单的说，key是虚拟DOM对象的标识，在更新时key起到极其重要的作用

        当状态中的数据发生变化时，react会根据【新数据】生成的【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff进行比较

        比较规则：

                a.旧的虚拟DOM中找到了与新的虚拟DOM一样的key

                        若的虚拟DOM中的内容没变，则直接使用之前的真实DOM

                        若的虚拟DOM中的内容变了，则生成的真实DOM,替换调页面中对应的真实DOM

                b.旧的虚拟DOM中没有找到了与新的虚拟DOM一样的key

                        则根据数据生成新的真实DOM,然后在渲染到页面上去

2）用index作为key可能会引发的问题

                1：若对数据进行：逆序添加，逆序删除省操作

                        会产生没有必要的DOM更新==>界面效果没变，但效率低

                2：如果结构中包含输入类型的DOM

                        则DOM更新时==>界面会有问题

3）开发中选何值作为key

        1.使用每条数据唯一的标识符作为key

        2：如果只是展示，不涉及增删改查，index也可以用

二：react脚手架

1：创建项目并启动

第一步：全局安装：npm i -g create-react-app

第二步：切换到想创项目的目录，使用命令：create-react-app hello-react

第三步：进入项目文件夹：cd hello-react

第四步：启动项目：npm start

脚手架项目结构

public ---- 静态资源文件夹

                        favicon.icon ------ 网站页签图标

                        index.html -------- 主页面

                        logo192.png ------- logo图

                        logo512.png ------- logo图

                        manifest.json ----- 应用加壳的配置文件

                        robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

                        App.css -------- App组件的样式

                        App.js --------- App组件

                        App.test.js ---- 用于给App做测试

                        index.css ------ 样式

                        index.js ------- 入口文件

                        logo.svg ------- logo图

                        reportWebVitals.js

                                       --- 页面性能分析文件(需要web-vitals库的支持)

                        setupTests.js

                                       ---- 组件单元测试的文件(需要jest-dom库的支持)

2：react入口文件index.js

注意！！！！！！！！！！

ReactDOM.render 在 React 18 中不再受支持。请改用createRoot。

官方
// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

3：创建一个holle组件

创建holle组件

 在App根组件中调用holle组件

4：样式模块化

防止样式冲突

方法一：用less嵌套写法

防止样式冲突

方法二：在命名文件时在index.css中间加上module

列：index.module.css

引用样式

 

5：拓展

1：拆分组件，实现静态组件，要注意className，style的写法

2：动态初始化列表，如何确定把数据放在哪一个组件的state中？

        某个（一个组件）组件使用：放在自身state中

        某些组件（多个组件）使用：放在他们共同的父组件state中（官方称之为：状态提升）

3：关于父子组件之间的通信

        父传子：通过props传递

        子传父：通过props传递函数的的方式，子组件用this.props接收并调用该函数，用函数传参的方法传递数据

4：注意defaultChecked和checked的区别，类似的还有defaultValue和value

5：注意：状态在哪，操作状态的方法就在哪