Next学习手册（四）- React Core Concepts

React Core Concepts

React有三个核心概念，需要熟悉这三个核心概念来构建React 应用程序。

• Components：构建块
• Props：支撑 / 道具
• State：状态

UI构建块

用户界面可以分解为称为组件的较小构建块。

组件允许构建自包含的、可重用的代码片段。

Next.js官方的比喻我认为很形象

• If you think of components as LEGO bricks, you can take these individual bricks and combine them together to form larger structures. If you need to update a piece of the UI, you can update the specific component or brick.
  • 如果你把组件想象成乐高积木，你可以把这些单独的积木组合在一起，形成更大的结构。如果需要更新UI的一部分，可以更新特定的组件或块。

优点：使代码更容易维护

Creating components

在React中，组件就是函数， 在脚本标记中，编写一个名为header的函数：

1
2
3
4
5
6
7
8
9

<script type="text/jsx">
  const app = document.getElementById("app")


  function header() {
  }

  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

组件是一个返回UI元素的函数。在函数的return语句中，可以编写JSX：

1
2
3
4
5
6
7
8
9

<script type="text/jsx">
  const app = document.getElementById("app")

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

  ReactDOM.render(, app)
</script>

要将此组件渲染到DOM，可以将其作为ReactDOM.render()方法中的第一个参数传递：

但是，React组件应该大写，以区别于普通的HTML和JavaScript。

1
2
3
4
5
6

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

// Capitalize the React Component
ReactDOM.render(Header, app);

其次，您使用React组件的方式与使用常规HTML标记的方式相同，带有尖括号<>。

1
2
3
4
5

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
// 使用了 Header 组件
ReactDOM.render(<Header />, app);

Nesting Components

应用程序通常包含比单个组件更多的内容。您可以像普通HTML元素一样，将React组件嵌套在彼此内部。

创建一个名为HomePage的新组件：

1
2
3
4
5
6
7
8

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}
function HomePage() {
  return <div></div>;
}

ReactDOM.render(<Header />, app);

然后将<Header>组件嵌套在新的<HomePage>组件中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      {/*  嵌套Header组件 下面的Header引用自上方的 Header()  */}
      <Header />
    </div>
  );
}
// 但是这里的却不是用的 <HomePage /> o,下面就讲了
ReactDOM.render(<Header />, app);

Component Trees

可以通过这种方式不断嵌套React组件以形成组件树。

顶级主页组件可以包含页眉、文章和页脚组件。每个组件都可以有自己的子组件等等。例如，Header组件可以包含Logo、Title和Navigation组件。

这种模块化格式允许在应用程序的不同位置重用组件, 在的项目中，由于＜主页＞现在是您的顶级组件，您可以将其传递给ReactDOM.render()方法：

1
2
3
4
5
6
7
8
9
10
11
12
13

unction Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
// 顶级组件是 HomePage 传递的时候会自动带着下级组件
ReactDOM.render(<HomePage />, app);