Day 11 - React: Component

关於 Separation of concerns（SoC）这个地方我觉得别人写的已经很清楚了(英文有许多文章，我只挑比较好懂的中文版，而且尽量没有广告)，所以简单的以我理解的方式来说：

在 React 之中，他用 component 的概念让元件视觉化的去处理，我猜这也是为什麽我觉得学 React 比较舒服的感觉（到目前为止啦...不想太早立Flag...）。

相关文章：

什麽是MVC?

前端技术发展史，关注点分离的辩证：模板语言到 React 与 Vue

理论-关注点分离(Separation of Concerns)

然後他分为 Functional Components 与 Class Components，两者的差异在於...一个是function 一个是class (好敷衍的答案）。

同时要注意的是，使用 React 的 Functional component时，开头文字请大写，不然浏览器会当成一般的 function 来使用喔。

Functional Components

我们继续回到那个首页，加上 div#root5，然後在index.js中写入

function Hello2 (){
 return <p>Hello, how're you</p>
}
const el2 = <Hello2 />;
ReactDOM.render(
  el2,
  document.getElementById('root5')
);

就可以跑出以下画面罗：

相关文章：

React Functional Component 与Class Component的差异

Class Components

在文件中，它描述自己是用来写进阶或更多互动用的功能，例如表格、动画等等。

一样，说不如做，我们来写看看，在这里我们继续来个 div#root6(我真的好懒惰) ，直接写下

class Answer extends React.Component {
  render() {
    return <p>I feel bad cause I am sadness.</p>;
  }
}
const el3 = <Answer />;
ReactDOM.render(
  el3,
  document.getElementById('root6')
);

接着就能看到回答的话语（对我心情不好）