今日文章目录

• 前言
• 参考文章

前言

昨天只有讲到一点点function component，这是我们撰写React最重要的零组件，可以将常用的逻辑抽成共用重复使用，一起来看看吧！

我们目前有谈到的渲染画面的方法：ReactDOM.render(element, container)。而我们现在要来满足第一个参数条件：element。创建React element有几种方式：

1. 创建单一个 React element：

const element = <h1>Hi, I am Joanna.</h1>;

2. 创建多个 React element，并在里面操作JS：也就是function component

function App() {
  const greeting = "Glad to see you!";
  return (
    <>
      <h1>Hi, I am Joanna.</h1>
      <span>{greeting}</span>
    </>
  );
}
export default App;

我们可以发现，function component就是
(1) 拥有一般 function的功能，让我操作JS。
(2) 回传 React element，满足上面render()第一个参数。

网页的 零组件外观知道了，但是每个零组件要怎麽组装在一起呢？
使用 import/ export (default)，想怎麽装，就怎麽装！

建立元件後输出 export，需要使用其他元件时引用 import

在这里，你可能会看到几种写法：
(写法ㄧ)

// App.jsx (输出)
export default App;

// index.jsx (引入)
import App from './App';

• export default : 一个文件档内只能一组。
• import 元件名称同 输出名称，不能修改。

(写法二)

// App.jsx (输出)
export App;

// index.jsx (引入)
import { App } from './App';

• export : 一个文件档内可以有多组。
• import { App } : 引入元件要加入 {}。
• import { App as ABC } : 接受引入时改名，改名只在当前引入文件内有效。

(写法三) export 撰写的位置

function App() {
    return()
}

export default App;    

export default function App() {
    return()
}

换成箭头函式：

const App = () => {
    return()
}
export default App;  

export const App = () => {
    return()
}

知道怎麽组装之後，来看看component零组件的内部构造吧！

React component 的核心概念：是将相关的UI与操作逻辑组合在一起。
所以component 可以小至 按钮显示＋点击後的执行动作，也可以大至 一个网页画面＋所有操作(但通常你不会想要一个这麽庞大的元件，适度拆分有助於聚焦每个画面区块与逻辑)。

但是，我们不能直接在HTML标签内直接操作JS，是要怎麽把UI与操作逻辑组合在一起？

在文章最开头，我们看到了单一element的写法：

const element = <h1 className="greet">Hi, I am Joanna.</h1>;

这样的写法称作「JSX」，是Javascript的语法扩充，我们可以同时找到对应 element node，并直接在它身上套入变入或判断，UI与逻辑完美相遇。

不过浏览器不认识JSX，所以在发布网页前，会先使用Babel使用React.createElement()方法，将JSX编译成Javascript。像是这样：

const element = React.createElement("h1", {className: "greet"} , "Hi, I am Joanna.")

所以，在React里面并不一定要撰写 JSX，也可以用上面的方式建立React element。但考量易读与维护性，还是建议使用JSX。

JSX 写法规则：

• class (HTML标签) -> className (JSX): class 在 JS 属於保留字，为了区别。
• for (HTML属性) -> htmlFor (JSX): for 在 JS 属於保留字，为了区别。
• 如果标签内没有任何内容，使用 < /> 关闭标签。
• JSX只接受 expression，故不能在JSX内写if-else(statement)，判断可以改用 && || 或 三元运算子替代。

参考文章

• React官网 - JSX
• React官网 - Components 与 Props
• React官网 - 不使用 JSX 开发 React
• React官网 - 条件 Render
• React官网 - 不使用 JSX 开发 React