likes
comments
collection
share

2023年了，该清楚命令式与声明式编程了

作者站长头像
站长
· 阅读数 15

命令式编程的例子

<html>
  <body>
    <div id="app"></div>

    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

随着程序或者团队变大，这种编码方式会导致构建程序变得困难 通过命令式的方式，开发人员需要用大量时间来编写指令来告诉计算机如何做事 那么，通过描述你想展示什么内容，让计算机弄清楚如何更新DOM不是（妙妙妈给妙妙开门 妙到家了？） 为了解决以上痛点，像我们平时开发用的vue react等就属于声明式的框架，作为开发人员，您可以告诉react， 您希望用户界面改变成什么样，react就替代您，来找到如何更新DOM的步骤。

声明式编程的例子

<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

我们通过来自react-dom的ReactDOM.render()方法，来告知react来渲染我们的h1标题到我们的app元素节点上 替代了之前通过纯js来直接操作DOM的方式 但是直接浏览器运行这段代码，会报错的，因为<h1>...</h1>这段代码就是JSX 那同学又问了，啥是JSX，JSX就是一个针对于js的语法扩展，它允许你通过一种类似于HTML格式的语法，来描述你的UI，你只需要记住JSX的3大规则即可，你不用再学习新的标签或者语法 那同学又又会问了，啥是JSX的3大规则： 1.返回单个根元素

<div>
  <h1>hi Q</h1>
  <img 
    src="https://demo.jpg" 
    alt="hi Q" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

<>
  <h1>hi L</h1>
  <img 
    src="https://demo.jpg" 
    alt="hi L" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

以上两种形式都是可以的，只不过空标签，它不会在浏览器html tree中留下踪迹 那可能同学又又又要问了，为啥这些JSX标签需要被包裹起来，JSX看起来像html，但是底层它是被转换为js对象的，包装到数组中，你不能从一个函数里返回两个对象，这也解释了为什么你不能返回两个jsx标签

2.要求标签显示闭合 自关闭标签<img>必须成为<img />，包装标签<li>oranges必须写成<li>oranges</li> 3.大部分属性要是驼峰 因为jsx变成js，用jsx写的属性变成js对象的键，js对变量名有显示，不能用破折号，不能用保留字，如class 正确示例：

<img 
  src="https://demo.jpg" 
  alt="Hi Q" 
  className="photo"
/>

也不用担心写错了，写错了react会在控制台给你报错的 可能小伙伴：你干嘛 哎哟（doge），这么多属性，让我一个个手动转换岂不是累趴， 转换工具奉上： transform.tools/html-to-jsx

好了，我们书接上一回，刚才提到了直接浏览器运行jsx会报错，那我们就需要一个js的编译器，如Babel，把我们的jsx代码转换为常规的js(注意type 此时已换成text/jsx)

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

至此呢，盆友们对于命令式与声明式的区别，应该有个大概，哪种可以提升开发效率呢，各位应该已经心中有数。