React基础概念-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43956426/article/details/138672542

React基础概念

一、概要

:::
介绍 React，形成对 React 有一个初步认识
:::

二、关键点

函数式组件、控件、JSX、生命周期

二、内容

组件

一些关键点。

React 允许你创建组件，应用程序的可复用 UI 元素。
在 React 应用程序中，每一个 UI 模块都是一个组件。
React 是常规的 JavaScript 函数，除了：
1. 它们的名字总是以大写字母开头。
2. 它们返回 JSX 标签。

文档链接：（预计 10 分钟阅读）

三方应用: https://react.docschina.org/learn/your-first-component#defining-a-component

JSX

JSX 是 ECMAScript 的类似 XML 的语法扩展，没有任何定义的语义。它不打算由引擎或浏览器实现。**这并不是将 JSX 合并到 ECMAScript 规范本身的提议。**它旨在供各种预处理器（转译器）使用，将这些标记转换为标准 ECMAScript。

// Using JSX to express UI components
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

规则：

只能返回一个根元素

HTML 标签

 <h1>海蒂·拉玛的待办事项</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>

JSX

<>
  <h1>海蒂·拉玛的待办事项</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

在 JSX 中<>空标签成为 Fragment，可以将元素进行分组，不会在 HTML 结构中添加额外节点，在 React 中<>是<React.Fragment></React.Fragment>的简写。

标签必须闭合

JSX 要求标签必须正确闭合。像 <img> 这样的自闭合标签必须书写成 <img />，而像 <li>oranges 这样只有开始标签的元素必须带有闭合标签，需要改为 <li>oranges</li>。

海蒂·拉玛的照片和待办事项的标签经修改后变为：

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
      <li>发明一种新式交通信号灯</li>
      <li>排练一个电影场景</li>
      <li>改进频谱技术</li>
  </ul>
</>

使用驼峰式命名给绝大部分属性

JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。

这就是为什么在 React 中，大部分 HTML 和 SVG 属性都用驼峰式命名法表示。例如，需要用 strokeWidth 代替 stroke-width。由于 class 是一个保留字，所以在 React 中需要用 className 来代替。这也是 DOM 属性中的命名:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
  style={{
    strokeWidth: '1px'
  }}
/>

在 JSX 中使用 JavaScript 表达式

如何使用引号传递字符串

当你想把一个字符串属性传递给 JSX 时，把它放到单引号或双引号中：

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

在 JSX 的大括号内引用 JavaScript 变量

但是如果你想要动态地指定 src 或 alt 的值呢？你可以用 **{** 和 **}** 替代 **"** 和 **"** 以使用 JavaScript 变量 ：

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

在 JSX 的大括号内调用 JavaScript 函数

大括号内的任何 JavaScript 表达式都能正常运行，包括像 formatDate() 这样的函数调用：

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'zh-CN',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

在 JSX 的大括号内使用 JavaScript 对象

除了字符串、数字和其它 JavaScript 表达式，你甚至可以在 JSX 中传递对象。对象也用大括号表示，例如 { name: "Hedy Lamarr", inventions: 5 }。因此，为了能在 JSX 中传递，你必须用另一对额外的大括号包裹对象：person={{ name: "Hedy Lamarr", inventions: 5 }}。

你可能在 JSX 的内联 CSS 样式中就已经见过这种写法了。React 不要求你使用内联样式（使用 CSS 类就能满足大部分情况）。但是当你需要内联样式的时候，你可以给 style 属性传递一个对象：

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Props 数据传递

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。Props 可能会让你想起 HTML 属性，但你可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。

文档链接：（预计 7 分钟阅读）

三方应用: https://react.docschina.org/learn/passing-props-to-a-component

条件渲染

通常你的组件会需要根据不同的情况显示不同的内容。在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。

文档链接：（预计 10 分钟阅读）

https://react.docschina.org/learn/conditional-rendering

列表渲染

你可能经常需要通过 JavaScript 的数组方法来操作数组中的数据，从而将一个数据集渲染成多个相似的组件。在这篇文章中，你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。

文档链接：（预计 10 分钟阅读）

https://react.docschina.org/learn/rendering-lists

三、小练习

发现错误

function profile() {
      return (
        <img
          src="https://i.imgur.com/QIrZWGIs.jpg"
          alt="Alan L. Hart"
          class="profile_class"
          style={
            color: 'red',
            font-size: '1em'
          }
        >
      );
    }
    
    export default function Gallery() {
      return <h1>了不起的科学家</h1>
          <profile />
          <profile />
          <profile />;
    }

以上写法中共有几处错误？错误原因是什么？

判断条件渲染


    function ShowSome(props) {
      return (
        // 如何写？
      );
    }
    
    export default function PageContainer () {
    
      const data = [
        {
          title: '标题1',
          desc: '描述该显示',
          showDesc: true,
        },
        {
          title: '标题2',
          desc: '描述不该显示',
          showDesc: false,
        }
      ]
      
      return <>
        {data.map(item => {
          return <ShowSome {...item}/>
        })}
      </>
    }