美文网首页
01|React新的前端思维方式

01|React新的前端思维方式

作者: 井润 | 来源:发表于2019-12-09 22:47 被阅读0次

    对应的之所以 类组件中使用 React模块是因为 在使用JSX的范围内必须要有React!

    使用React来写项目的时候通过脚手架工具 create-react-app 工具来帮助我们雏形应用!

    01|JSX进步还是倒退?

    1. 因为既然是组件化开发,将对应的样式结构和交互写在一个模块当中,高内聚的组织形式, 在HTML上面写对应的事件和事件处理函数是不可取的,推荐使用jQuery添加事件处理函数,直接写onclick会带来代码混乱的问题!

      1. 对应的HTML的事件处理函数是在全局环境下进行的,污染了全局环境!
      2. 给很多DOM元素添加事件,影响性能,网页需要处理的事件太多性能就会越低!
      3. 动态的将DOM删掉的话需要把对应的事件处理函数注销,忘了注销的话很容易带来内存泄漏的问题!
    2. JSX好在哪里?

      1. JSX中使用对应的事件和事件处理函数,没有直接使用,而是使用了事件委托(event delegation) 无论有多少个onClick出现,最后都只会DOM树上添加一个事件处理函数,并且挂载到最顶层的DOM节点上,所有的点击事件都会被他捕获,与此同时,最后根据具体的组件分配给特定函数!
      2. React的控制了组件的生命周期,可以在组件的不同阶段,更细粒度的控制!

    02|分解React应用:

    从对应的package.json中来看,其实脚手架本身还是隐藏了很多细节,但是最重要的是 react-scripts 依赖项,从对应的 scripts 命令选项来看,对应的命令都是调用了 react-scripts!

    其中比较特殊的是,脚手架并没有暴露出对应的配置细节! 从最后一个命令来看eject 便可以估摸出大致的意思了, 将对应的配置弹射出来!

    要记住 eject 之所以形象,也是因为它是不可逆的! 运行了对应的命令之后 会看到对应的 目录结构和 package.json 都会有明显的变化 !

    03|React理念

    UI = Render(Data);
    

    我们不需要关心太多细节,只需要将专注点放到 Data这块来,这也就是 数据驱动视图!

    与此同时还有几个值得我们注意的点:

    • Render函数式纯函数,没有副作用的,对应的值对应的结果!
    • UI会随着Data的变化而变化,这也就是所谓的 Reactive Programming 响应式编程, 所以这也是React之所以是React的原因!

    04|Virtual DOM

    是不是使用了React对应的性能就变得低了啊? 重复的渲染效率这一点如何解决呢?

    虽然说在React的实现中,看起来每次render函数被调用,都会把组件重新绘制一次,虽然看起来是这样,但是实际上不是这样的!

    Virtual DOM是保证我们每次之重新渲染最少的DOM元素!

    1. 对应的Virtual DOM概念的提出也是React创新的一点! 那么Virtual DOM是什么?

      1. DOM是结构化文本的抽象表达形式, 特定的Web环境中,结构化文本其实就是指代HTML!
      2. HTML格式的网页,现将HTML解析并且构建DOM树,根据DOM树渲染对应的用户界面,界面发生改变的时候,改变DOM书上的具体节点!
    2. 根据什么特性,优化性能的啊?

      1. 减少DOM操作,减少内存的开销
      2. DOM操作会引起浏览器对网页的重新布局,重新绘制,这是一个比JS语句执行更慢的过程!
    3. React是如何做的啊?

      1. DOM是对HTML的抽象Virtual DOM是对DOM树的抽象
      2. React首先构建Virtual DOM,不涉及到浏览器的部分,自上而下渲染React组件的时候,Virtual DOM只渲染该渲染的话! 最小化操作DOM!
      3. 更加细粒度的操作DOM!

    05|React工作方式的优点

    在讨论之前先说说jQuery,jQuery的优点体现在哪里?

    • 足够直观,简单易懂
    • 涉及到大型的项目的时候,写出来的代码往往纠缠在一起,并且难以维护!

    React的优势:

    • 组件的方式构建应用,更加灵活可控!
    • 将DOM交给React帮你处理!

    React程序流程:

    Event===>render===>Virtual DOM ===> DOM

    相关文章

      网友评论

          本文标题:01|React新的前端思维方式

          本文链接:https://www.haomeiwen.com/subject/xxtwgctx.html