vuvivian's blog

越努力,越幸运.

个人简历: react、dva、react-router、hooks

  1. 推一下dva
    <font color=#FF8A65>dva 简化了 redux 的使用,并且封装了 redux-saga 和 react-router,同时还可以包含 dva-loading 插件获取 loading 状态等。</font>
  1. 在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。在显示时,如何将内容写入__html对象中?即如何在React中使用innerHTML?
    原理:
    1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;
    2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;
    3.既可以插入DOM,又可以插入字符串;
    4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。
<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />
如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:
<div dangerouslySetInnerHTML={{ __html: '
123
' }} />
  1. react中的Portal是什么?
    提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。
    ReactDOM.createPortal(child, container)

  2. react16的错误边界(Error Boundaries)是什么,,它无法捕获哪些错误


    如果一个类组件定义了一个名为 componentDidCatch(error, info): 的新生命周期方法,它将成为一个错误边界
    错误边界是 React 组件,它可以在子组件树的任何位置捕获 JavaScript 错误,记录这些错误,并显示一个备用UI ,而不是使整个组件树崩溃。 错误边界(Error Boundaries) 在渲染,生命周期方法以及整个组件树下的构造函数中捕获错误。
    异步代码/事件处理/服务端渲染/错误边界自身抛出来的错误 (而不是其子组件)
  3. 什么是上下文Context,怎么使用Context开发组件

  1. 看过dva g model example这个命令的实现吗,如何写一个新建组件的node命令
  1. 元素居中使用transform比marginTop/left好在哪里

    1. transform会比margin更省时间。
    2. 与margin-left实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate()函数中的百分比是相对于自身宽高的百分比,所以能进行居中
  2. 现在有这样一个新闻列表,用户点击新闻可以看详情。 但是回来的时候,用户并不知道刚才看了什么,影响效率。 因此想做一个“在已经看过的新闻标题后面增加“已阅读”文字”的功能。

  1. 关注过react之类的社区吗?最近有什么新的动态?
本文最后更新于 天前,文中所描述的信息可能已发生改变