美文网首页
围绕React的一些思考

围绕React的一些思考

作者: 泡杯感冒灵 | 来源:发表于2022-03-13 16:37 被阅读0次
声明式开发
  • 相对于jquery这种命令式开发,react是面向数据编程的,减少了大量的DOM操作量。
可以与其他框架并存

通过react的入口文件index.js我们知道,react是把组件挂载到了ID为root的DOM节点下。


image.png

这个id为root的元素,是定义在public下的index.html里的,也就是说react的入口文件,只去管理id为root的div里的各种DOM的渲染。
如果这个时候,我们在id为root的div同级别,又定义了其他元素,假设这个元素我们是通过引入jquery框架控制的。那么这个时候jquery和react这两个库,是可以共存的。每个库只管理自己范围内的DOM,不会相互影响。


image.png
image.png
组件化
  • react组件是通过class类集成 React.component来实现的定义的。
  • react组件在代码里是首字母大写以标签形式使用的。
  • 组件在整个应用中,应该是一个树形结构。
单向数据流
  • 父组件可以向子组件传值,但是子组件只能使用这个值,不能直接去改变这个值,否则会报错。为什么这么做,很好理解,当多个子组件使用同一个数据的时候,如果其中一个子组件修改了父组件的数据,那么其他引用这个数据的子组件也会出现变化,当出现错误的时候,很难定位问题,代码调试非常不方便。
  • 所以,子组件要修改父组件的数据,只能是通过父组件传递给子组件方法,然后子组件调用这个方法,去修改,实际上,最终还是父组件修改了自己的数据。


    image.png
视图层框架

如果按照父子组件传值的方法,当组件树很复杂的时候,组件间的传值就会变得非常复杂,所以大型项目光用React框架是不行的,我们还需要配合使用一些数据层的框架,帮我们解决组件间的复杂传值问题。
React把自己定义为视图层框架,并不是什么问题都解决,它只解决数据和页面渲染的工作。其他工作,交给其他工具来做。当然,如果是小型项目,我们借助react内部的传值机制就可以了。

函数式编程

在写react代码的时候,我们基本上都是在函数里写的,比如 constructor,render等等。
函数式编程带来了几个好处:

  1. 维护起来比较容易,当一个函数比较大的时候,可以对它进行拆分。每个函数各司其职。
  2. 方便做自动化测试。

相关文章

  • 围绕React的一些思考

    声明式开发 相对于jquery这种命令式开发,react是面向数据编程的,减少了大量的DOM操作量。 可以与其他框...

  • React Server Side Rendering

    对学习react的一些思考。 最近在做react技术栈的一个博客系统,用到react+redux+router+s...

  • hooks

    参考文献: Dan Abramov 对React Hooks的一些思考 React官方网站 一些比较经典对于hoo...

  • 深入理解react+redux

    react+redux的一些思考 我们经常把react和redux放到一起.react大家都很熟悉,我们先简单的看...

  • 围绕饮食的一些思考和践行

    有一天,我碰巧和一个中年女人在一张桌子上吃饭。当然,我们之间不太熟悉,饭是各吃各的,吃饭的时候偶尔聊上几句...

  • TODO

    H5 直播总结视频 总结关于 React 门店项目的一些思考

  • 围绕情绪管理的思考

    很长一段时间以来,每天下班后身心都感到疲惫,年龄大了,精力衰退可能是个原因,最重要的原因是睡眠不好,每天只...

  • 关于前端React的一些思考

    WEB标准的理解:结构 Html表现 css行为 js + dom好处 : 1易于维护:修改css可以修改整项目2...

  • React笔记11(组合 vs 继承)

    React具有强大的组合模型,我们建议使用组合而不是继承来复用组件之间的代码。 本章节中,将围绕几个React新手...

  • 细读 React | PureComponet

    今天来聊一聊 React.Component、React.PureComponent、React.memo 的一些...

网友评论

      本文标题:围绕React的一些思考

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