.

进击的react - https://zhuanlan.zhihu.com/advancing-react


面试中问什么react问题 - https://zhuanlan.zhihu.com/p/28176065


入门级问题

  • 什么是JSX
  • state 和 props 有什么区别
  • React 是哪个公司贡献的开源代码

进阶级问题

  • 什么时候应该选择用class实现一个组件,什么时候应该用一个函数实现一个组件

  • 能描述一下React组件的各个声明周期函数吗

  • 什么是shouldComponentUpdate函数?有什么作用

  • 当组件的setSatate函数被调用之后,会发生什么

  • 为什么我们利用循环产生的组件中要用key这个特殊的psop

高手级问题

  • setState可以接受函数作为参数吗?有什么作用

  • 什么是HoC(Higher-Order Component)?适用于什么场景

  • 什么是Fiber?是为了解决什么问题

  • 两个并不是父子关系的组件,如何实现相互的消息传递?请想出尽量多的办法,并说说各自的优缺点

  • 如果你能够改进React的一样功能,那会是哪一个功能


React新的前端思维方式

1 - 如何初始化一个React项目

// 全局安装快速来发React应用的工具
npm install --global create-react-app

// 在当前目录下创建指定参数名的应用目录
create-react-app first_react_app

cd first_react_app
npm start

2 - 如何创建一个React组件(能完成某个特定功能的独立的可重用的代码)

  • 定义组件
// 从reacr 库中引入React 和 Component
import React, { Component } from 'react';

// 使用ES6的语法来构建组件类,Component作为所有组件的基类,提供了很多组件共有的功能
class ClickCounter extends Component {}
  • 导入组件
// import是ES6语法中导入文件模块的方式,
// 兼容性问题,ES6语法的JavaScript代码会被webpack 和 babel 转译成所有浏览器都支持的ES5语法
import ClickCounter from './ClickCounter'
  • 定义组件的方式
    • React.createClass方式创建组件类,这种方法已经被废弃了
    • 使用ES6的语法来构建组件类

3 - JSX

  • 什么是JSX

    • JSX是JavaScript的语法扩展,让我们在JavaScript中可以编写想HTML一样的代码
  • JSX 和 HTML 有什么区别

    • JSX中使用的 “元素”不局限于HTML中的元素,可以是任何一个React组件
    • React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写
    • 在JSX中可以通过onClick这样的方式给一个元素添加事件处理函数,在HTML中不建议
  • JSX是进步还是倒退

    • HTML代表内容,CSS代表样式,JavaScript定义交互行为,实际上是把不同的技术分来管理了,而不是逻辑上的“分而治之”
    • 做同一件事的代码应该有高耦合性的设计原则
  • JSX中使用onClick添加事件处理函数和HTML的onclick有很大的不同

    • HTML中的onclick添加的事件处理函数是在全局环境下执行的,这污染了全局环境
    • HTML中给很多DOM元素添加onclick事件,可能会影响网页的性能,毕竟,网页需要的事件处理函数越多,性能就会越低
    • HTML中对于使用onclick的DOM元素,如果要动态的从DOM树中删除掉的话,需要把对应的事件处理器注销,否则内存泄漏
    • JSX中一个组件使用了onClick,并没有产生直接使用onclick的HTML,而是使用了事件委托的方式处理点击事件,无论有多少个onClick出现,其实最后都只在DOM书上添加了一个事件处理点击事件,挂在最顶层的DOM节点上
    • 所有的点击事件都被这个事件处理函数捕获,然后根据具体组件分配给特定函数,使用事件委托的性能当然要比为每个onClick都挂载一个事件处理函数要高
    • React控制组件的生命周期,在unmount的时候清除相关事件处理函数

4 - React的工作方式

  • jQuery如何工作

    • 选中一些DOM元素,然后对这些元素做一些操作
  • React的理念

    • 渲染。React的工作方式把开发者从繁琐的操作中解放出来,开发者只需要关心“我想要显示什么”,而不用操心“怎么去做”

    • UI=render(data)。用户看到的界面(UI),应该是一个函数(render)的执行结果,只接受数据(data)作为参数

    • 纯函数。指的是没有任何副作用,输出完全依赖于输入的函数,两次函数调用如果输入相同,得到的结果也绝对相同。

    • 通过数据驱动渲染,重复渲染来实现用户交互,这样重复渲染的效率会不会太低了呢?

  • Virtual DOM

    • React利用Virtual DOM,让每次渲染都只重新渲染最少的DOM元素

    • 浏览器为了渲染HTML格式的网页,会先将HTML文本解析以构建DOM树,然后根据DOM树渲染出用户看到的界面,当要改变界面内容的时候,就去给编DOM树上的节点

    • 尽量减少DOM操作。DOM操作会引起浏览器对网页进行重新布局,重新绘制,影响性能

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

设计高质量的React组件


推荐阅读更多精彩内容