React学习

组件：

1. React 将交互性放在首位，同时仍然使用相同的技术：React 组件是一个 JavaScript 函数，你可以用标记来填充它。

2. React组件是常规的JavaSc函数，但它们的名称必须以大写字母开头，否则将无法正常工作。

3.导出组件时的return语句后面必须要跟上（），如果没有括号，后面行中的任何代码都将被忽略。

4.组件可以呈现其他组件，但是切勿嵌套定义

如：

export default function Gallery() {

                function Profile() {

                        // ...

                }

        // ...

}

这样的代码片段非常慢，会导致错误。相反，请在顶层定义每个组件

如：

export default function Gallery() {

        // ...

}

function Profile() {

        // ...

}

---

组件导入和导出：

导出：默认导出和命名导出

默认导出：export default ...

命名导出：export ...

(一个文件只能有一个默认导出，但它可以具有任意数量的命名导出。)

(如果文件仅导出一个组件，则人们通常使用默认导出，如果文件导出多个组件和值，则使用命名导出。)

导入：默认导入和命名导入

默认导入：import ... from '...'

命名导入：import {...} from '...'  (使用大括号）

(导出组件的方式决定了必须如何导入组件)

---

使用JSX编写标记

JSX是JavaScript的语法拓展，允许在JavaScript文件中编写类似HTML的标记。

JSX 和 React 是两个独立的东西。它们通常一起使用，也可以彼此独立使用它们。JSX 是一个语法扩展，而 React 是一个 JavaScript 库。

1.要从组件返回多个元素时，使用单个父标记包装他们

2.JSX要求标签显示关闭。如：<img><img /> <p> </p>

---

JSX中的JavaScript与大括号

1.传递带引号的字符串

const imgSrc = 'https://test.com'

const name = 'Chen'

export default function Avatar() {

        return (

               <>

                        <img src = {imgSrc}  />

                        <h1> {name} 's To Do List </h1>

                </>

        );

}

在JSX中，只能以2种方式使用大括号：

(1) 作为直接在JSX标记中的文本  <h1> {name} 's To Do List </h1>

(2) 作为紧跟符号的属性：读取变量，传递字符串 <img src = {imgSrc} />

2.可以在JSX种传递对象

export default function TodoList() {
  return (
    <ul style = {{
      backgroundColor: 'black',
      color: 'pink'
    }}>
    </ul>
  );
}

内联属性样式需要采用驼峰写法

---

props传递信息

1. 将props传递给子组件

export default function Profile() {

        return (

               <Avatar size={100} />

        )

}

2.子组件读取信息

function Avatar(size) {

        return (

               <img width={size} height={size} />

        )

}

还可以给props传递设置一个默认值

function Avatar(size = 100) {

        ...

}

---

条件渲染

在React中，可以使用JavaScript语法（如语句、运算符等）有条件的渲染JSX。 ( if && ? : )

根据isPacked的值，返回不同的JSX树

if (isPacked) {

        return <li className="item">{name} ✔</li>;

}

return <li className="item">{name}</li>;

在某些情况下，不想渲染任何内容，可以返回：null

if (isPacked) {

        return null;

}

return <li className="item">{name}</li>;

使用三元运算符

return (

        <li className="item">

                {isPacked ? name + ' ✔' : name}

        </li>

);

逻辑AND运算符

return (

        <li className="item">

                {name} {isPacked && '✔'}

        </li>

);

有条件的将JSX分配给变量

使用let获取到变量

let itemContent = name

使用语句将JSX表达式重新赋值给if

if (isPacked) {

        itemContent = name + "✔";

}

在页面上展示

<li className="item">

        {itemContent}

</li>

---

数据集合列表呈现

箭头函数后的表达式，不需要语句return

const listItems = chemists.map(person =>

        <li>...</li> 

);

但是，如果=>后跟一个 { 大括号，必须加上return

const listItems = chemists.map(person => {

        return <li> ... </li>;

});

在示例中会控制台会报错误

需要为每一个数组项提供一个唯一标识的：key

<li key={person.id} >...</li>

---

保持组件纯净

 以上内容学习完官网文档后的自我总结，具体想要深入了解还是建议仔细阅读官网

Describing the UI – React