Functional Component

组件 Component

组件就像 JavaScript 的函数。组件可以接收任意输入(称为”props”)，并返回 React 元素，用以描述屏幕显示内容，比如：一个按钮，一个表格，一条评论。

(引用自 react 官网)

两种类型的 Component:

Class Component

Functional Component 简介

1 2 3 
function Title(props) {    return <h1>Title: {props.title}</h1>;}

Functional Component 会接收一个 props 参数, 并返回一个 React 元素。

Functional Component 因为从“外貌”来看就是一个 JavaScript 的函数。

合成组件

我们可以由多个 Components 组合成新的 Component，从而可以抽象（形成）到任意层级。

注意下面的 Functional Component 的参数。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 
function Title(props) {    return <h1>Title: {props.title}</h1>;} function Paragraph(props) {    return <p>{props.content}</p>} function Article() {    return (        <div>            <Title title="函数式组件" />            <Paragraph content="这里可以放内容.......LOL" />            <Paragraph content="这里还可以放内容.......LOL" />        </div>    );} ReactDOM.render(    <Article />,    document.getElementById('root'));

Read Only props

props 是只读的，我们无法修改 props。

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

1 2 3 
function add(a, b) {    return a + b;}

1 2 3 4 5 
const bankAccount = { total: 100 }; function withdraw(account, amount) {    account.total -= amount;}