React 相关

孟珍kong
553 阅读26分钟

一、React简介

React是哪个公司开发的？
Facebook公司开发
React是什么？它的主要特点是什么？
React是一个用于构建轻量级的UI界面的JavaScript库
特点：
1.声明式设计 使用ReactDOM.render()
2.高效：使用虚拟DOM，提高渲染性能
3.JSX语法
4.灵活 可以搭配其他库使用
5.组件式开发
6.单项数据流  自上而下

二、React渲染原理及基本写法

你知道Virtual DOM的工作原理吗？

zhuanlan.zhihu.com/p/361225643

React 有两个函数：

diff 函数，去计算状态变更前后的虚拟 DOM 树差异
渲染函数，渲染整个虚拟 DOM 树或者处理差异点

React 主要的工作是组件实现、更新调度等计算工作；
ReactDOM 提供了在网页上渲染的基础
 
虚拟 DOM 的工作原理是通过 JS 对象模拟 DOM 的节点。在 Facebook 构建
React 初期时，考虑到要提升代码抽象能力、避免人为的 DOM 操作、降低代码
整体风险等因素，所以引入了虚拟 DOM。

虚拟 DOM 在实现上通常是Plain Object（纯粹对象，字面量方式或者Object构
造函创建的），以React为例，在 render 函数中写的 JSX 会在 Babel 插件的
作用下，编译为 React.createElement 执行JSX中的属性参数。
React.createElement 执行后会返回一个 Plain Object，它会描述自己的tag
类型、props 属性以及 children 情况等。这些 Plain Object 通过树形结构
组成一棵虚拟 DOM 树。当状态发生变更时，将变更前后的虚拟 DOM 树进行差异比
较，这个过程称为 diff，生成的结果称为 patch。计算之后，会渲染 Patch 完成
对真实 DOM 的操作。

虚拟 DOM 的优点：
1.改善大规模 DOM 操作的性能
2.规避 XSS 风险
3.以较低的成本实现跨平台开发。

虚拟 DOM 的缺点：
1.内存占用较高，因为需要模拟整个网页的真实 DOM。
2.高性能应用场景存在难以优化的情况，类似像 Google Earth 一类的高性能前端
应用在技术选型上往往不会选择 React。
说说React diff的原理是什么？

juejin.cn/post/684490…

传统diff算法的时间复杂度为O(n^3),其中n为树中节点的总数，随着n的增加，
diff所耗费的时间将呈现爆炸性的增长。react却利用其特殊的diff算法做到了
O(n^3)到O(n)的飞跃性的提升，而完成这一壮举的法宝就是下面这三条看似简单的diff策略：

1.Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。
2.拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
3.对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。


tree diff：
React 对树的算法进行了简洁明了的优化，即对树进行分层比较，两棵树只会对同一层次的节点进行比较。

component diff：
1.如果是同一类型的组件，按照原策略继续比较 Virtual DOM 树即可。
2.如果不是，则将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
3.对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切知道这点，
那么就可以节省大量的 diff 运算时间。因此，React允许用户通过shouldComponentUpdate()
来判断该组件是否需进行diff算法分析，但是如果调用了forceUpdate方法，shouldComponentUpdate则失效。

element diff：
INSERT_MARKUP :新的组件类型不在旧集合里，即全新的节点，需要对新节点执行插入操作。
MOVE_EXISTING :旧集合中有新组件类型，且 element 是可更新的类型，generateComponentChildren 已调用
receiveComponent ，这种情况下 prevChild=nextChild ，就需要做移动操作，可以复用以前的 DOM 节点。
REMOVE_NODE :旧组件类型，在新集合里也有，但对应的 element 不同则不能直接复用和更新，需要执行删除操作，或者
旧组件不在新集合里的，也需要执行删除操作。

总结：
React的高效得益于其Virtual DOM+React diff的体系。diff算法并非react独创，react只是在传统diff算法做了优化。但因为其优化，将diff算法的时间复杂度一下子从O(n^3)降到O(n)。
React diff的三大策略：

Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。
拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。


在开发组件时，保持稳定的 DOM 结构会有助于性能的提升。
在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作。
key的存在是为了提升diff效率，但未必一定就可以提升性能，记住简单列表渲染情况下，不加key要比加key的性能更好。
懂得借助react diff的特性去解决我们实际开发中的一系列问题。
浏览器为什么无法直接JSX？怎么解决呢？
浏览器只能读取JavaScript对象，而不能读取普通JavaScript对象中的JSX。
因此，要使浏览器能够读取JSX，首先，我们需要使用Babel之类的JSX转换器将
JSX文件转换为JavaScript对象，然后将其传递给浏览器。
React的渲染原理

www.jianshu.com/p/8dc8e5984…

React中生产组件会通过React.createElement或JSX（React.createElement语法糖）
通过Babel进行解析转化为React.createElement(type, props, children)，
然后转化成Virtul DOM（其实就是JS对象，通过键值对的形式存储起来，
使用嵌套将节点的层级关系进行展示），最后通过React.render 渲染到
页面上，渲染过程会运用到React的diff算法（对同一层级的两个树节点进
行比较，如果节点变化，对此子节点也进行通过更新，减少了递归深入访问
其他节点，减少复杂度，所以在渲染列表的时候给每一项增加唯一的key值，
可以提升性能）（React 16以后的React fiber算法，基于单链表的树结构）

React.createElement的实现方法 image.png

同时引用这三个库React.js、React-dom.js和babel.js它们都有什么作用？
react.js (react核心库)
react-dom (提供react操作dom扩展库)
babel.js (将jsx语法转换成标准的javascript代码)
render方法的原理你有了解吗？它返回的数据类型是什么？
render的第一个参数通过babel转为React.createElement，后者根据参数
类型的不同调用不同的内部方法来转换为原生dom并生成真实dom插入到容器中.

1.对原生html标签调用ReactDOMComponent的mountComponent方法，
将element转化为真实的dom节点， 并插入到对应的container中，返回realDom；

2.对于自定义组件，递归调用ReactCompositeComponentWrapper转化为原生dom标签，
然后和上面一样通过ReactDOMComponent的mountComponent方法，生成realDom;
string和number，调用的是ReactDOMTextComponent；
null和boolean，调用的是ReactEmptyComponment;

image.png

自定义组件时render是可选的吗？为什么？
https://zh-hans.reactjs.org/docs/react-without-es6.html
```
render() 方法是 class 组件中唯一必须实现的方法。
```
render在什么时候会被触发？
```
1.this.setState
2.props改变
3.shouldComponentUpdate
```
React render方法原理

zhuanlan.zhihu.com/p/45091185

image.png

虚拟DOM如何变成真实的DOM
ReactMComponent的mountComponent方法，这个方法的作用是：将element转成
真实DOM节点，并且插入到相应的container里，然后返回markup（realDOM）
render方法的实现

segmentfault.com/a/119000002…

render 方法的第一个参数接收的是 createElement 返回的对象，也就是虚拟
DOM；第二个参数则是挂载的目标DOM。

image.png image.png

在React中组件和元素有什么区别？createElement与cloneElement两者有什么区别？
总结：组件是由元素构成的。元素数据结构是普通对象，而组件数据结构是类或纯函数。

1.React组件：React.CreateClass、ES6、函数组件
2.React元素：JSX语法、React.createElement、React.cloneElement 
    {
        _context: Object,
        _owner: null,
        key: null,
        props: {
            className: 'element'，
            children: 'I'm element'
        },
        ref: null,
        type: "div"
    }
    -----------------------------------------------------
    React.createElement(
        type,
        [props],
        [...children]
    )
    ------------------------------------------------------
    React.cloneElement(
      element,
      [props],
      [...children]
    )
解释下React中component和pureComponent两者的区别是什么？

blog.csdn.net/Yaokai_Assu…

Component是React App的基本构建的单位，也是React中的基本代码复用单位。
PureComponent与Component在除了其shouldComponentUpdate方法的实现之
外几乎完全相同。PureComponent已经替我们实现了shouldComponentUpdate方
法。对于PureComponent而言，当其props或者state改变之时，新旧props与
state将进行浅对比（shallow comparison）

使用PureCompoent要求满足如下条件：

1.props和state都必须是不可变对象（immutable object）。
2.props和state不能有层级嵌套的结构，（否则对子层级的改变无法反映在浅拷贝中）。
3.如果数据改变无法反应在浅拷贝上，则应该调用forceUpdate来更新Component。
4.一个PureComponent的子Component也应当是PureComponent。
你阅读过React的源码吗？简要说下它的执行流程

image.png

在React中声明组件时组件名的第一个字母必须是大写吗？为什么？
必须，用以区分是React组件还是dom标签
React自定义组件的三种方式

zhuanlan.zhihu.com/p/64980558

一、函数式组件
二、React.createClass
三、React.extends Component
React.createClass和extends Component的区别有哪些？React中creatClass的原理，constructor和getInitialState有不同，React中getInitialState方法的作用是什么，React中getDefaultProps的作用？

segmentfault.com/a/119000000…

createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的
class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。
createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函
数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号
隔开，这是ES6 class的语法规范。
主要区别在于：
语法区别：ES5是方法形式，ES6是Class形式
props：propType 和 getDefaultProps
状态的区别：getInitialState、constructor里面this.state定义初始值
this区别：ES5方式可正确绑定，ES6方式需要constructor里面super()
Mixins：ES6以后不能使用，换成了hoc

constructor是ES6里面的定义方法，使用React继承的属性和方法
React.createClass方法是ES5创建组件：
    getInitialState获取组件的初始化状态
    getDefaultProps用于初始化组件属性
React组件命名推荐的方式是哪个？为什么不推荐使用displayName，React的displayName有什么作用？

zhuanlan.zhihu.com/p/20616464

// bad
export default React.createClass({
  displayName: 'ReservationCard',
  // stuff goes here
});

// good
export default class ReservationCard extends React.Component {
}
类组件和函数式组件有什么区别

overreacted.io/zh-hans/how…

1.没有React实例，通过继承React.Component生成的
2.React hooks之前，函数组件没有状态，接收props
3.函数式组件没有生命周期，生命周期函数是React.Component类的方法实现的
React组件的state和props两者有什么区别？

juejin.cn/post/684490… image.png

React组件的构造函数有什么作用？React组件的构造函数是必须的吗？有必要在构造函数中调用super()吗？ React中除了在构造函数中绑定this,还有别的方式吗？
构造函数用于类中初始化对象状态的方法，在类中对象创建时自动调用；
React中的构造函数的作用：
0.指定this -> super(props)
1.通过向this.state 分配对象来初始化组件的本地状态
2.用于绑定组件中出现的事件绑定方法 this.handleSubmit = this.handleSubmit.bind(this);

如果组件只return了一个简单的节点，没有state或事件对象的使用可以不需要。

ES6的继承机制，实质是先创造父类的实例对象this（构造函数中必须调用super()方法，否则没有办法获取到this），
然后再用子类的构造函数修改this；
  • super()和super(props)有什么区别？
super中的props是否接收，只能影响constructor生命周期能否使用this.props，
其他的生命周期已默认存在this.props
React中遍历时为什么不用索引作为唯一的key值？
React中的key有什么作用？
需要把keys设置为全局唯一吗？

blog.csdn.net/qq_27574367…

key应该是唯一的，react中不需要key是全局唯一的，只需要在相邻的兄弟元素中是唯一的就可以了，
因为react只会用来和兄弟元素比较.
React必须使用JSX吗？
https://zh-hans.reactjs.org/docs/react-without-jsx.html
```
不一定，可以使用React.createElement生成组件
```
render函数中return如果没有使用()会有什么问题？
```
不使用()也没有什么问题，如果return 后面的html标签需要换行，
这个时候就需要使用，最好return jsx使用()进行包裹
```
如何提高组件的渲染效率呢？在React中如何避免不必要的render？
```
1.shouldComponentUpdate
2.PureComponent
3.immutable
4.列表设置key
```

  • React的isMounted有什么作用？ my.oschina.net/magicly007/…

    判断组件是否卸载

  • ES6的语法'...'在React中有哪些应用？

    {...props}

  • 在React中组件的props改变时更新组件的有哪些方法？

    1.通过将方法以props传递给子组件
2.

  • 写出React动态改变class切换组件样式 blog.csdn.net/weixin_2958…

  • React中怎么操作虚拟DOM的Class属性？

    webpack配置style-loader中的css-module

  • 为什么属性使用className而不是class呢？

    1.class是关键字
2.React的jsx实际是js，js会使用dom.className获取样式名，跟js保持一致

  • 说说你对React的组件命名规范的理解，说说你对React的项目结构的理解 zhuanlan.zhihu.com/p/47321322

如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？
通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库immutable，
强制返回一个新的对象
props.children.map和js的map有什么区别？为什么优先选择React的？
React.Children.map 能够处理未知数据类型，即使 React.children是 null
和 undefined 也能够正确处理。React.Children.forEach 一样的原理。
React的严格模式有什么用处？
React的strictMode检查应用程序中是否存在潜在问题；

StrictMode 目前有助于：
1. 识别不安全的生命周期
2. 关于使用过时字符串 ref API 的警告
3. 关于使用废弃的 findDOMNode 方法的警告
4. 检测意外的副作用
5. 检测过时的 context API

import React from 'react';
function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}
React如何进行代码拆分？拆分的原则是什么？
```
高内聚、低耦合
1.对api请求fetch进行单独封装
2.公共组件
3.公共方法
4.按照业务模块进行model拆分
```
在React中你有经常使用常量吗？
对于后端返回的value转化为前端展示，会使用常量对象
为什么说React中的props是只读的？
React组件必须像纯函数那样使用它们的props，只能通过dispatch 一个action 然后去更新state，props是父组件向子组件或从store中拿到的数据
=React中验证props的目的是什么？React中怎么检验props

www.jianshu.com/p/a73fb26c8…

PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的
如果组件的属性没有传值，那么它的默认值是什么？
```
true 
<MyTextBox autocomplete />
等价于
<MyTextBox autocomplete={true} />
对于props为Boolean类型的可以通过简写方式传值
```
可以使用TypeScript写React应用吗？怎么操作？

www.cnblogs.com/zheng-chuan…

如何给非控组件设置默认的值？

www.jianshu.com/p/f83e961b4…

受控组件：通过修改state可以改变组件的value
非受控组件：没有value或prop，通过为其添加ref prop来访问渲染后的底层DOM元素
在React中怎么使用async/await？

juejin.cn/post/684490…

async/await 是JS中Promise的语法糖
1. 把async关键字放到你的函数前
2. 在函数体内使用await关键字
3. catch捕获异常
async function () {
    const res = await fetch(url);
}

image.png

  • 你阅读了几遍React的源码？都有哪些收获？你是怎么阅读的？

  • 写个例子说明什么是JSX的内联条件渲染

    1.&& 运算符
2.三目运算符
3.if else

  • 你最喜欢React的哪一个特性（说一个就好）？

  • 你最不喜欢React的哪一个特性（说一个就好）？

  • 在React中什么时候使用箭头函数更方便呢？

    www.cnblogs.com/ly0612/p/12…

    不要在render函数里定义箭头函数

  • 使用PropTypes和Flow有什么区别？

    Flow：zh-hans.reactjs.org/docs/static…

    Flow 是一个针对react项目所有 JavaScript 代码的静态类型检测器，需要单独添加依赖并手动运行
PropTypes是针对组件级别的类型检测

  • 在JSX中如何写注释？

{/* jsx */} 单行注释

{/*
    多行注释   
*/}

  • 在React中遍历的方法有哪些？它们有什么区别呢？

  • 写例子说明React如何在JSX中实现for循环 image.png

  • 为什么建议Fragment包裹元素？它的简写是什么？

    为一个组件添加多个元素,可以讲你的子组件列表添加到一个分组中(<></>),并且不会再DOM增加额外节点

  • 你有用过React.Fragment吗？说说它有什么用途？

    zh-hans.reactjs.org/docs/fragme…

  • 在React中你有遇到过安全问题吗？怎么解决？

    juejin.cn/post/687474…

    自动转义、jsx语法
dangerouslySetInnerHTML预防xss攻击

  • 怎么防止HTML被转义？

image.png

  • 怎样在React中使用innerHTML？
方法一、利用props中的children属性，向组件中传入HTML结构。
方法二、render props给组件传入HTML结构。
方法三、利用高阶组件HOC给原有组件添加HTML结构。

dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{__html:'<a href="http://https://segmentfault.com/">test url</a>'}}/>

  • 怎么在JSX里属性可以被覆盖吗？覆盖的原则是什么？

    {...props}
Object.assign()

  • 怎么在JSX里使用自定义属性？

    1.data-type
2.e.currentTarget.getAttribute('data-value')

三、React生命周期及state

React中发起网络请求应该在哪个生命周期中进行？为什么？
componentDidMount
1.获取数据肯定是以异步方式进行，不会阻碍组件渲染（只会耽误请求发送这个时间），然后接着渲染，等异步返回数据后，如果成功再进行setState操作，setState是将更新的状态放进了组件的__pendingStateQueue队列，react不会立即响应更新，会等到组件挂载完成后，统一的更新脏组件（需要更新的组件）。放在constructor或者componentWillMount里面反而会更加有效率。
2.再说说React-Redux，要想让组件更新，必须要有用connect(...)(yourComponent)封装的容器（高阶）组件，这个组件会监听store变化，内部调用setState触发你的组件更新。数据处理都是通过dispatch(action)进行,自己并不会在组件的声明周期内直接ajax获取取数据。使用redux这个问题就成为了再组件声明周期的哪个节阶段dispatch(action)获取数据才合理？
总结：
我认为原因有：
1.跟服务器端渲染（同构）有关系，如果在componentWillMount里面获取数据，fetch data会执行两次，一次在服务器端一次在客户端。在componentDidMount中可以解决这个问题。
2.在componentWillMount中fetch data，数据一定在render后才能到达，如果你忘记了设置初始状态，用户体验不好。
3.react16.0以后，componentWillMount可能会被执行多次。
说说React的生命周期有哪些？
装载阶段
组件第一次被渲染时的阶段，这一阶段相关的生命周期函数有：
constructor
componentWillMount
render
componentDidMount

更新阶段
如果组件中的 state 或者 props 发生了改变，React 就会更新该组件，此时会调用更新阶段中相关的生命周期函数：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

卸载阶段
componentWillUnmount
————————————————————————————————————————————————————————————
React 16.8以后
挂载阶段：
constructor(props): 实例化。
static getDeriverdStateFromProps 从 props 中获取 state。
render 渲染。
componentDidMount: 完成挂载。

更新阶段：
static getDeriverdStateFromProps 从 props 中获取 state。
shouldComponentUpdate 判断是否需要重绘。
render 渲染。
getSnapshotBeforeUpdate 获取快照。
componentDidUpdate 渲染完成后回调。

卸载阶段：
componentWillUnmount 即将卸载。

错误处理：
static getDerivedStateFromError 从错误中获取 state。
componentDidCatch 捕获错误并进行处理。
React中如何监听state的变化？
componentDidUpdate拿到的两个参数分别是prevProps和prevState
componentWillUpdate可以直接修改state的值吗？
```
如果在componentWillUpdate里面调用this.setState, this._pendingStateQueue != null，
performUpdateIfNecessary方法就会调用updateComponent方法进行组件更新，
updateComponent方法会调用shouldComponentUpdate和componentWillUpdate，
从而造成死循环，导致内存占满崩溃；如果对nextState和this.state进行判断就可以避免不必要的循环
```
React怎样跳过重新渲染，React怎么判断什么时候重新渲染组件呢，shouldComponentUpdate方法是做什么的？
```
shouldComponentUpdate 方法里面判断，return false

shouldComponentUpdate(nexrProps) {
    if (this.props.num === nexrProps.num) {
        return false
    }
    return true;
}
```
React中修改prop引发的生命周期有哪几个？
```
React 16.8之前：componenWillReceiveProps
React 16.8之后：getDerivedStateFromProps
```
如何更新组件的状态？
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a022cf48981449c8899e705c64453653~tplv-k3u1fbpfcp-watermark.image)
React为什么不要直接修改state？如果想修改怎么做？
```
The state is immutable, so there would be unknown side effect if we update the state directly.
We should use setState rather than change state directly.
```
React this.setState的原理

image.png

在React中组件的state和setState有什么区别？
this.state会改变state的值但是不会渲染
this.setState改变后渲染
为什么建议setState的第一个参数是callback而不是一个对象呢？
因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state。
React多个setState调用的原理是什么？
https://blog.csdn.net/kongjunchao159/article/details/72626637

1.对象的方式，会发生浅合并，Object.assign()方法，批量更新
2.函数式setState，按照调用的顺序依次更新
React中调用setState会更新的生命周期有哪几个？
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
React中setState的第二个参数作用是什么呢？
获取更新后的state
React中的setState是同步还是异步的呢？为什么state并不一定会同步更新？

zhuanlan.zhihu.com/p/350332132

1.在React的调度流程中，React就是异步事件
2.在setTimeout setInterval ，直接在 DOM 上绑定原生事件等。这些都不会
走 React 的调度流程，你在这种情况下调用 setState ，那这次 setState 就
是同步的
React中的setState执行机制是什么呢？

juejin.cn/post/684490…

image.png

1.将setState传入的partialState参数存储在当前组件实例的state暂存队列中。
2.判断当前React是否处于批量更新状态，如果是，将当前组件加入待更新的组件队列中。
3.如果未处于批量更新状态，将批量更新状态标识设置为true，用事务再次调用前一步方法，保证当前组件加入到了待更新组件队列中。
4.调用事务的waper方法，遍历待更新组件队列依次执行更新。
5.执行生命周期componentWillReceiveProps。
6.将组件的state暂存队列中的state进行合并，获得最终要更新的state对象，并将队列置为空。
7.执行生命周期componentShouldUpdate，根据返回值判断是否要继续更新。
8.执行生命周期componentWillUpdate。
9.执行真正的更新，render。
10.执行生命周期componentDidUpdate。
React中的setState批量更新的过程是什么？

segmentfault.com/a/119000001…

setState把我们希望更新的partialState推入待更新队列之后，交给
enqueueUpdate去处理更新的时机，enqueueUpdate当中出现了一个重要的对象batchingStrategy，他有一个属性isBatchingUpdates用来告诉
enqueueUpdate是应该更新，还是应该等待，把组件推入dirtyComponents（用
于控制批量更新的对象），dirtyComponents提供的batchedUpdates用来更新我
们组件的方法。然而走到这一步，react却又向我们抛出了一个重大的概念——事务。
batchedUpdates当中transaction.perform就是事务的调用。

React事务：
事务是一种react的处理机制，通过使用wrapper包裹你实际想要调用的方法，做一
些前置（initialize）和收尾（close）的工作，所以在事务包裹的方法内，会优
先触发前置钩子，以及执行完后会有收尾方法调用，这在react用作异常处理使用
React中的setState和replaceState的区别是什么？
setState 会进行 state 对象合并，只会更新要修改的 key。
replaceState 直接全量替换，类似 useState 中的 setXXX
React中的setState缺点是什么呢？
异步，不能立即拿到结果

四、React通信

React组件间的通信、共享数据方法有哪些？

segmentfault.com/a/119000002…

React非兄弟组件如何通信？
React兄弟组件如何通信？
React非父子组件如何通信？
React父子组件如何通信？
都可参照组件通信的方法

五、React使用第三方插件、动画

  • React怎样引入svg的文件？
1.<img src="source.svg" />
2.import { ReactComponent as ReactLogo } from './logo.svg';
  • 说说你对Relay的理解
Relay是Facebook在React.js Conf（2015年1月）上首次公开的一个新框架，用于为React应用处理数据层问题。

在Relay中，每个组件都使用一种叫做GraphQL（GraphQL 是一种针对 Graph（图状数据）进行查询特别有优势的
Query Language（查询语言））的查询语句声明对数据的依赖。组件可以使用 this.props 访问获取到的数据。

  • 你有使用过formik（React的表单库）库吗？说说它的优缺点 zhuanlan.zhihu.com/p/146177067

  • immutable的原理是什么？你对immutable有了解吗？它有什么作用？ blog.csdn.net/qq_35368183…

    Immutable.js 也就是将一些数据结构进行了包装，并对外提供了创建、修改、删除的 API，
隐藏了内部可变的细节，表现出了外部不可变的特性。同时，为了降低重复创建对象、拷贝数据
所带来的内存以及 CPU 开销，Immutable 采用了结构共享等措施以提升数据操作效率

  • 如何用React实现滚动动画？

    window.onScrolll = () => {
    if (document.documentElement.scrollTop > 430) {
       this.setState({
         className: 'show'
       })
     }
}

  • 在React项目中你用过哪些动画的包？

    www.cnblogs.com/it-Ren/p/12…

  • 动态导入组件？你有使用过loadable组件吗？它帮我们解决了什么问题？

    www.jianshu.com/p/4562db6bb…

    segmentfault.com/q/101000001…

    React-loadbale是实现组件异步加载的，动态加载

  • 你有使用过suspense组件吗？它帮我们解决了什么问题？ www.jianshu.com/p/61d6920c9…

    实现组件懒加载

  • 怎么在React中引入其它的UI库，例如Bootstrap

    react-bootstrap是一个非常受欢迎的针对react封装过的bootstrap，它本身不包含css，所以也是需要使用bootstrap原生库。
在create-react-app建的项目目录中安装react-bootstrap。
npm install react-bootstrap --save

安装bootstrap。
npm install bootstrap@3.3.7 --save

在index.js文件中增加css引用。
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

在需要用到bootstrap组件的代码中，引入所需组件。
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
- 说出几点你认为的React最佳实践
https://segmentfault.com/a/1190000018107137

```
1.Function Component 减少组件的生命周期
2.PureComponent https://huxiansheng.net/2018/04/19/React%E4%B8%ADPureComponent%E4%BD%BF%E7%94%A8/
3.HOC 高级组件、装饰符增加组件的功能
4.定义组件的PropTypes
5.避免使用多层嵌套三元表达式
```

  • 你是如何划分React组件的？

    业务代码
公共模块

  • 怎样将多个组件嵌入到一个组件中？

  • React的render中可以写{if else}这样的判断吗？ blog.csdn.net/Crystalqy/a…

    不能，可以通过三元运算符或者函数方法return一个jsx，在组件里调用该函数

  • 为什么标签里的for要写成htmlFor呢？

    在react中label标签不能使用for关键字——
Warning: Invalid DOM property `for`. Did you mean `htmlFor`

  • 在React中怎么引用第三方插件？比如说jQuery等

    1.通过script标签，引入cdn资源
2.npm包的方式下载 import引入

  • 在React中如何引入图片？哪种方式更好？

    第一种导入：
import Img from "./images/1.png"


第二种直接获取图片：
<img src={require("./images/1.png")} alt=""/>

  • 在React中怎么使用字体图标？

    image.png

  • 路由切换时同一组件无法重新渲染的有什么方法可以解决？

通过传入不同的参数进行接口重新请求和渲染

  • create-react-app有什么好处？

    Create React App是一个React脚手架，用于创建单页面（SPA）应用，
省去安装配置webpack和babel，专注业务代码。

  • 有用过React Devtools吗？说说它的优缺点分别是什么？

  • 给组件设置很多属性时不想一个个去设置有什么办法可以解决这问题呢？

    {...props}

  • 使用ES6的class定义的组件不支持mixins了，那用什么可以替代呢？

    zhuanlan.zhihu.com/p/20361937

- 怎样实现React组件的记忆？原理是什么？
https://zhuanlan.zhihu.com/p/37913276

```
React16.8之前可以使用闭包
React 16.8 可以使用 useMemo 来实现上文所说的记忆化技术。
```
  • 创建React动画有哪些方式？

zhuanlan.zhihu.com/p/28536964

1.React className [样式集合].join(' ')
2.通过JS判断增加style 
3. React Motion 支持React Web & React Native
4. Animated React Native
5. Velocity React 动画API
  • 为什么建议不要过度使用Refs？

segmentfault.com/a/119000000…

ref提供了一种对于react标准的数据流不太适用的情况下组件间交互的方式，
例如管理dom元素focus、text selection以及与第三方的dom库整合等等。
但是在大多数情况下应该使用react响应数据流那种方式，不要过度使用ref。

  • React怎么提高列表渲染的性能？

    虚拟超长列表：juejin.cn/post/684490…

    增加key

  • 为何说虚拟DOM会提高性能？

    虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。

  • React的性能优化在哪个生命周期？它优化的原理是什么？

    shouldComponentDidUpdate return false

  • 你知道的React性能优化有哪些方法？

    www.infoq.cn/article/kve…

  • 举例说明在React中怎么使用样式？

  • React有哪几种方法来处理表单输入？

  • create-react-app创建新运用怎么解决卡的问题？

六、React应用

  • React Intl是什么原理？如何实现React组件国际化

    zhuanlan.zhihu.com/p/29237913

    通过react-intl npm包，原理和react-dedux类似，最外层包一个Provider，利用getChildContext，
将intlConfigPropTypes存起来，在FormattedMessage、FormattedNumber等组件或者调用
injectIntl生成的高阶组件中使用，来完成国际化的。

  • 如何封装一个React的全局公共组件？ www.shuzhiduo.com/A/obzbN0Nyz…

  • 使用React写一个todo应用，说说你的思路

  • 说说你是怎么理解React的业务组件和技术组件的？

  • 展示组件和容器组件有什么区别？

    根据组件的职责通常把组件分为UI组件和容器组件。UI组件负责UI的呈现容器组件负责管理数据和逻辑。
两者通过React-Redux 提供connect方法联系起来

  • React的状态提升是什么？使用场景有哪些？ zh-hans.reactjs.org/docs/liftin…

  • 简单描述下你有做过哪些React项目？

  • 不用脚手架，你会手动搭建React项目吗？

  • 你是如何学习React的？

  • 从旧版本的React升级到新版本的React有做过吗？有遇到过什么坑？

  • 你用过React版本有哪些？

有用过React的服务端渲染吗？怎么做的？

segmentfault.com/a/119000002…

  • React怎么拿到组件对应的DOM元素？

  • JSX和HTML有什么区别？

  • React的书写规范有哪些？

  • 使用React的方式有哪几种？

avatar
文章
阅读
粉丝