1.组件

1.jsx

react中使用jsx描述组件

const element = <h1>Hello, world!</h1>;

被react渲染为：

var element = React.createElement(
  "h1",
  null,
  "Hello, world!"
);

jsx中使用花括号使用JavaScript

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

2.组件

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>
  );
}

react中使用函数定义组件，通过<函数名 />就可引入组件。

3.props值传递

使用props从父组件到子组件单向传递值

//父组件
export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

//子组件
function Avatar({ person, size }) {
  // 在这里 person 和 size 是可访问的
}