一、key与diffing算法
-
react中的key:可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识便于react区分。一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常,我们使用来自数据的 id 作为元素的 key,当元素没有确定的 id 时,你可以使用他的序列号索引 index 作为 key。
-
虚拟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,随后渲染达到页面。 -
用index作为key可能会引发的问题:
a. 若对数据进行逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新。此时页面效果没有问题,但效率低。
b. 如果结构中还包含输入类的DOM,在逆序时会产生错误DOM更新,页面会出现问题。
c. 注意:如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,使用index作为key是没有问题的。 -
开发中如何选择key:最好使用每条数据的唯一标识作为key,比如id、手机号、学号等;如果确定知识简单的展示数据,用index也是可以的。
二、react脚手架
- 脚手架:用来帮助程序员快速创建一个基于xxx库的模板项目。脚手架包含了所有需要的配置:语法检查、jsx编译、devServer等;脚手架下载好了所有相关依赖;可以直接运行一个简单效果。
- react提供了一个用于创建react项目的脚手架库:react-creat-app;项目的整体构架为react+webpack+es6+selint;使用脚手架开发项目的特点:模块化、组件化、工程化。
- 创建项目并启动
npm install -g create-react-app //全局安装脚手架库
create-react-app hello-react //切换到想创建项目的目录
cd hello-react //进入项目文件夹
npm start //启动项目
- 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库的支持)
三、功能界面的组件化编码流程
- 拆分组件:拆分界面、抽取组件
- 实现静态组件:使用组件实现静态页面效果;
- 实现动态组件:动态显示初始化数据(数据类型、数据名称、保存在哪个组件)、交互(从绑定时间监听开始)
四、todo案例相关知识点
- 拆分组件、实现静态组件,注意:react中className、style的写法。
- 动态初始化列表,将数据放在哪个组件的state中?–当数据只是某个组件使用时,将它放在自身的state中,但如果是几个组件共同使用,则将它放在他们共同的父组件state中(官方称此操作为状态提升)。
- 父子组件之间的通信:父组件给子组件传递数据通过props传递,子组件给父组件传递数据也是通过props来传递,不同的是,子传父需要父组件提前给子组件传递一个函数,子组件通过调用props里的函数将数据传递给父组件。
- 注意defaultChecked和checked的区别,defaultChecked只有在第一次指定的时候起作用,以后都不会起作用。类似还有defaultValue和value。
- 状态在哪里,操作状态的方法就在哪里。
五、跨域问题
- 前端跨域问题:接口在一台服务器上,而页面在另一台服务器上,这样前端获取接口数据时就会产生跨域问题。
- 产生跨域问题的原因:浏览器的同源策略。同源就是指协议、域名、端口都一致,如果任意一项不一致就不是同源。跨域就是网页的url和调用接口的url不一致。
- 解决跨域问题:
a. JSONP:动态生成一个script,由于script不受同源策略的限制,就可以请求不同域的接口了。
b. CORS:跨域资源共享。后台服务器允许某个域名下的请求。具体解决方法是在服务器给响应添加头信息。
六、消息订阅与发布
- 安装pubsub.js。
- 发送消息:PubSub.publish(名称,参数)、订阅消息:PubSub.subscrib(名称,函数)、取消订阅:PubSub.unsubscrib(名称)。
七、github搜索案例相关知识点
- 设计状态时要考虑全面,例如带网络请求的组件,要考虑请求失败怎么办。
- 消息订阅与发布机制:要先订阅后发布,并且在组件将要卸载时取消订阅。消息订阅与发布机制适合于任意组件之间的通信。
- fetch发送网络请求(关注分离的设计思想)。