React学习（一）描述UI

本文为本人阅读React官方中文文档后所做笔记，之前学过vue，感觉和vue有一些相似之处，也有很多东西对于我自己来说不需要多说，所以写的比较简洁一点。

组件

React的应用程序是由组件构成，一个组件是界面的一部分。可以将一些界面封装成组件，嵌套到其他界面中，这点和vue一样。让这些界面代码具有复用性。

一个组件：

javascript 复制代码

function MyButton() {
  return (
    <button>我是一个按钮</button>
  );
}

组件嵌套：

javascript 复制代码

export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

一般情况都是组件的标签是大写字母开头的，传统html标签是小写开头的。

导出组件也是使用export，默认导出只能有一个，可以有多个具名导出。

JSX

return后面的html结构称为JSX语法，是一种JavaScript的拓展语法，支持在JavaScript中写一些类似HTML结构的代码。一个组件不能返回多个JSX标签，要返回多个时候，要用<></>空标签或者<div><div/>包裹，做到只返回一个标签。

展示变量

在jsx中要展示变量中的数据，使用{ xxx }的方式，将变量写在xxx的位置，就能做到展示指定变量的数据。

javascript 复制代码

return (
  <h1>
    {user.name}
  </h1>
);

如果要将变量赋值到某个html属性中，使用属性={变量} 的方式（相当于vue中的 :属性="变量"）

javascript 复制代码

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

和vue中一样，这个"变量"的位置并不是只能放置变量，也可以放置匿名对象、表达式：

javascript 复制代码

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={
          {
            width: user.imageSize,
            height: user.imageSize
          }
        }
      />
    </>
  );
}

渲染

条件渲染

条件渲染没有类似于vue中的v-if之类的语法，而是直接使用js中的分支语句去控制JSX的内容。

javascript 复制代码

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

也可以使用三目运算符的方式

javascript 复制代码

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

如果不需要else if或者else分支，也可以使用&&的方式

javascript 复制代码

<div>
  {isLoggedIn && <AdminPanel />}
</div>

列表渲染

列表渲染通常使用数组的map方式映射，返回一个JSX数组，再return。

javascript 复制代码

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];
const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

在li标签中，也要和vue中的列表渲染一样，带上一个key，每个列表项传入一个唯一的值，确保dom更新的时候的正确性。

Props通信

和vue中一样，react可以通过props进行数据的父传子，包括变量、函数。

我们常见的很多html属性也是props的一种，比如image标签中的url等等。所以props的写法和html属性的写法类似。

父组件：

javascript 复制代码

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>共同更新的计数器</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

子组件：

在组件的函数参数上写上指定的参数名，就能接收到指定的props信息。

javascript 复制代码

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      点了 {count} 次
    </button>
  );
}

也可以采用不解构的方式，直接都放到props对象中，再引用props中指定的属性：

javascript 复制代码

function MyButton(props) {
  return (
    <button onClick={props.onClick()}>
      点了 {props.count} 次
    </button>
  );
}

在子组件中，如果要指定某个props属性在没有接收到值的时候，会有一个默认值，则可以采用设置默认值的方式：

javascript 复制代码

function Avatar({ person, size = 100 }) {
  // ...
}

如果涉及到多代传递，需要把本组件接收到的所有props，传递给下一个子组件，可以使用展开语法：

javascript 复制代码

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

还可以将JSX作为props传递，类似于vue中的插槽，可以做到动态切换ui的html结构

javascript 复制代码

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}