第八天～
前面我们把 React Native 一些特色讲解了一下，
也稍微的改动了画面，
那在这过程中，多次的提到 component，
那我们今天就来说一下 component 吧
在 React ， 它就是封装了 一部分画面的 结构、样式 、 逻辑
component 拥有以下特性：
在 component 内部的逻辑是封闭的，无法直接的从外部去干涉
这其实就像在玩积木一样，我们可以把不同的 component 组合起来，放在同一个空间里
const App = () => {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
};
当我们在建立 component 我们可以在内部制定相关的逻辑，
比如说，我希望建立一个 TouchMe component ，
它的逻辑是：按钮能够在按下去的时候改变文字
const TouchMe = () => {
const [text, setText] = useState('按我！');
const onButtonClick = () => {
setText('按了！');
};
return <Button onClick={onButtonClick}>{text}</Button>;
};
如上，就是一个简单的逻辑，被包裹在 TouchMe component 里
component 是可以重复被使用的，并且是不会互相影响的，
例如，我们可以用 TouchMe component 去建立大量的 TouchMe Button
const App = () => {
return (
<>
<TouchMe />
<TouchMe />
<TouchMe />
<TouchMe />
</>
);
};
如上，每一个 TouchMe Button 都会有自己的逻辑，按下去也不会去影响到其他的
在 React 要如何建立 component 呢？
两种方式：
以 es6 class 语法 继承 React.Component
class App extends React.Component {
render() {
return <Text>Hello</Text>;
}
}
必须实作 render function 并且 return react element
就如同范例那样，宣告一个 function ，最後 return react element
const App = () => {
return <Text>Hello</Text>;
};
它是在 react 里最小的单位，
它并不是 component ，也不是 component 的 instance，也不是 virtual DOM，
就只是一个纯物件(plain object)， 描述关於此节点最终输出的画面内容，
那里面会包含两个参数， type and props
它的建立有两种：
React.createElement 来建立
>>: Material UI in React [Day 22] Data Display (part 2) 分隔线 & 列表
前言 现在我们已经很像IPhone的内建闹钟了，但是还是有一点不一样(下图红框圈起处) 因此今天就要...
Integers(整数) ●最常使用的是integer type是int ●如果数字超出type的可...
一个网站可以非常复杂也可以非常简单。大型电商网站每个功能都有特化的设计跟架构，安全性、高并发交易、快...
铁人赛进入尾声了，和大家分享个好消息，这支 WordPress 付款外挂已经写好送审到 WordPr...
在真实世界中，物体因为反射光进我们的眼中，而能被看见；因此，除了物体形状外，材质与光之间的关系是3D...