学习React的生命周期（Day:4）

任务：学习React的生命周期

按照马老师的要求，本来应该是学习React的生命周期，但是官档上只有响应式 Effect 的生命周期我不清楚他们之间的联系，所以选择了从UI方面开始看

不过也弄懂了每个 React 组件都经历相同的生命周期：

当组件被添加到屏幕上时，它会进行组件的 挂载。
当组件接收到新的 props 或 state 时，通常是作为对交互的响应，它会进行组件的 更新。
当组件从屏幕上移除时，它会进行组件的 卸载。

1、明白了React 应用是由被称为组件的独立 UI 片段构建而成

React 组件本质上是可以任意添加标签的 JavaScript 函数也做了对应练习

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

2、组件的导入与导出

这里的导入和导出分为默认和具名导出

区别在于：同一文件中，有且仅有一个默认导出，但可以有多个具名导出！ 接下来这个练习有三个文件，我们依次来看

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

首先这里是使用了具名导出定义了这个文件的照片

import { Profile } from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>了不起的科学家们</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

这里是具名导入了上面的文件，然后又通过默认导出下面的Gallery

import Gallery from './Gallery.js';
import { Profile } from './Profile.js';

export default function App() {
  return (
    <div>
      <Profile />
      <Gallery />
    </div>
  );
}

最后这里通过具名导入了Profile，然后默认导入了Gallery 最后默认导出APP

这里还是把我绕了一下，不过还好最后走出来了需要注意的其实也不难 1、区分好默认和具名的区别 2、最后的App.js文件中需要把前面的文件按照他们的方式导入 3、在App.js的文件中，需要说明用到了这两个文件

以上就是导入和导出的部分

3、将Props传递给组件

什么是Props？ Props 是你传递给 JSX 标签的信息。例如，className、src、alt、width 和 height 便是一些可以传递给的 props：

function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={100}
      height={100}
    />
  );
}

export default function Profile() {
  return (
    <Avatar />
  );
}

我之前都不知道什么是props，我的理解就是类似于数据吧，官方的解释是属性是React的三大属性之一

这部分后面还剩一点内容，我会尽快完成

XJQ124 / Some-notes