阅读《深入浅出React和Redux》的知识点总结


目录

《深入浅出React和Redux》的作者程墨 资深架构师,曾任职于摩托罗拉、雅虎和微软,云鸟配送平台联合创始人,本片博客我将阅读本书的知识点加以总结,方便感兴趣的开发人员学习。

1.如何初始化一个 React 项目?

安装靠:npm install --global create-react-app

初始化项目靠:create-react-app first_react_app

启动项目靠:1.cd first_react_app
2. npm start (npm run start)

2.为什么要减少对Dom的操作?

因为浏览器在渲染html格式的网页时,先会将html文本解析来构建Dom树,然后根据Dom树渲染用户看到的界面,当要改变界面内容的时候,就会改变Dom树上的节点,Dom操作会引起浏览器对网页的重新布局,这个过程肯定效率不高。

3.React函数式编程的优点?

React 利用函数式编程的思维来解决用户界面渲染的问题,最大的优势是开发者的效
率会大大提高,开发出来的代码可维护性和可阅读性也大大增强

4.低耦合和高内聚的概念理解

低耦合:指的是不同组件之间的依赖关系要尽量弱化,也就是每个组件要尽量独立。
高内聚:指的是把逻辑紧密相关的内容放在一个组件中。

5.什么时候选择用 prop ?什么时候选择用state 呢?

prop 是组件的对外接口,当外部世界要传递一些数据给 React 组件,一个最直接的方式就是通过 prop ;同样,
React 组件要反馈数据给外部世界,也可以用 prop

state 是组件的内部状态,对外用
prop ,内部用 state

6.虚拟Dom(Virutal DOM)的概念及其原理?

虚拟Dom就是对 DOM 树的抽象,虚拟Dom 不会触及浏览器的部分,只是存在于 JavaScript 空间的树形结构,每次自上而下
React 组件时,会对比这一次产生的 虚拟Dom 和上一次渲染的虚拟Dom 进行对比,然后修改真正的 DOM 树时就只需要触及差别中的部分就行。

7.JSX 中引入样式注意要点

JSX 中引入样式须用花括号{}把 prop 值包住,所以 style 的值有两层花括号,外层花括号代表是 JSX语法,内层的花括号代表这是一个对象常量。

例:

style={{color :”red”}}

8.在构造函数中为什么要调用super(props)?

ES6 语法中,super 指代父类的构造函数,React 里面就是指代 React.Component 的构造函数。

在你调用 super() 之前,你无法在构造函数中使用 this,类实例的所有成员函数就无法通过 this.props 访问到父组件传递过来的 props 值.

9.propTypes是用来做什么的?

propTypes 检查是一个辅助开发的功能,用来定义 prop 规格,这不只是声明,而且是一种限制,在运行时和静态代码检查时,都可以根据propTypes 判断外部世界是否正确地使用了组件的属性.

10.组件的生命周期

生命周期可能会经历如下三个过程:

1.装载过程(Mount ),也就是把组件第一次在 DOM 树中渲染的过程;

2.更新过程(Update ),当组件被重新渲染的过程;

3.卸载过程(Unmount ),组件从 DOM 中删除的过程;

装载过程

1.constructor :作用(初始化 state,绑定成员函数的 this 环境)

2.componentWillMount:componentWillMount 会在调用 render 函数之前被调用,

3.render (作用:渲染挂载组件)

4.componentDidMount: componentDidMount 会在调用 render 函数之后被调用

注:剩下的文章后续补充


文章作者: BiLiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BiLiang !
评论
 上一篇
ReactNative开发:就前端而言,如何实现app的更新功能 ReactNative开发:就前端而言,如何实现app的更新功能
一般的安卓app都有自动更新功能,实现app的更新,以让用户体验新版本的功能,这里也是项目中用到的,今天就来总结一下
下一篇 
Http常见状态码解析 Http常见状态码解析
HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码。HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事。
2020-11-05
  目录