react学习笔记3

一、key与diffing算法

1. react中的key:可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识便于react区分。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的 id 作为元素的 key，当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key。

2. 虚拟DOM中key的作用：简单来说，key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。详细的说，当状态中的数据发生改变时，react会根据新数据生成新的虚拟DOM，随后react进行新虚拟DOM和旧虚拟DOM的diff比较，比较规则如下：

   a. 旧虚拟DOM中找到了与新虚拟DOM相同的key:若虚拟DOM中的内容没有变，直接使用之前的真实DOM；若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM；
   b. 旧虚拟DOM中未找到与新虚拟DOM相同的key：根据数据创建新的真实DOM，随后渲染达到页面。

3. 用index作为key可能会引发的问题：
   a. 若对数据进行逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新。此时页面效果没有问题，但效率低。
   b. 如果结构中还包含输入类的DOM，在逆序时会产生错误DOM更新，页面会出现问题。
   c. 注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

4. 开发中如何选择key：最好使用每条数据的唯一标识作为key，比如id、手机号、学号等；如果确定知识简单的展示数据，用index也是可以的。

二、react脚手架

1. 脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目。脚手架包含了所有需要的配置：语法检查、jsx编译、devServer等；脚手架下载好了所有相关依赖；可以直接运行一个简单效果。
2. react提供了一个用于创建react项目的脚手架库：react-creat-app；项目的整体构架为react+webpack+es6+selint；使用脚手架开发项目的特点：模块化、组件化、工程化。
3. 创建项目并启动

npm install -g create-react-app //全局安装脚手架库
create-react-app hello-react //切换到想创建项目的目录
cd hello-react //进入项目文件夹
npm start //启动项目

4. react脚手架项目结构
   a. public–静态资源文件夹

     favicon.icon ---网站页签图标
     index.html ---主页面
     logo192.png ---Logo图
     logo512.png ---logo图
     manifest.jspn ---应用加壳的配置文件
     robots.txt ---爬虫协议文件

b. src --源代码文件

     App.css ---App组件的样式
     App.js ---App组件
     App.test.js ---用于给App做测试
     index.css ---样式
     logo.svg ---入口文件
     reportWebVitals.js---页面性能分析文件（需要web-vitals库的支持）
     setupTests.js ---组件单元测试的文件（需要jest-dom库的支持）

三、功能界面的组件化编码流程

1. 拆分组件：拆分界面、抽取组件
2. 实现静态组件：使用组件实现静态页面效果；
3. 实现动态组件：动态显示初始化数据(数据类型、数据名称、保存在哪个组件)、交互(从绑定时间监听开始)

四、todo案例相关知识点

1. 拆分组件、实现静态组件，注意：react中className、style的写法。
2. 动态初始化列表，将数据放在哪个组件的state中？–当数据只是某个组件使用时，将它放在自身的state中，但如果是几个组件共同使用，则将它放在他们共同的父组件state中（官方称此操作为状态提升）。
3. 父子组件之间的通信：父组件给子组件传递数据通过props传递，子组件给父组件传递数据也是通过props来传递，不同的是，子传父需要父组件提前给子组件传递一个函数，子组件通过调用props里的函数将数据传递给父组件。
4. 注意defaultChecked和checked的区别，defaultChecked只有在第一次指定的时候起作用，以后都不会起作用。类似还有defaultValue和value。
5. 状态在哪里，操作状态的方法就在哪里。

五、跨域问题

1. 前端跨域问题：接口在一台服务器上，而页面在另一台服务器上，这样前端获取接口数据时就会产生跨域问题。
2. 产生跨域问题的原因：浏览器的同源策略。同源就是指协议、域名、端口都一致，如果任意一项不一致就不是同源。跨域就是网页的url和调用接口的url不一致。
3. 解决跨域问题：
   a. JSONP：动态生成一个script，由于script不受同源策略的限制，就可以请求不同域的接口了。
   b. CORS：跨域资源共享。后台服务器允许某个域名下的请求。具体解决方法是在服务器给响应添加头信息。

六、消息订阅与发布

1. 安装pubsub.js。
2. 发送消息：PubSub.publish(名称,参数)、订阅消息：PubSub.subscrib(名称,函数)、取消订阅：PubSub.unsubscrib(名称)。

七、github搜索案例相关知识点

1. 设计状态时要考虑全面，例如带网络请求的组件，要考虑请求失败怎么办。
2. 消息订阅与发布机制：要先订阅后发布，并且在组件将要卸载时取消订阅。消息订阅与发布机制适合于任意组件之间的通信。
3. fetch发送网络请求（关注分离的设计思想）。