react文档阅读笔记（一）

约定不等于承诺〃 2021-12-09 03:15 248阅读 0赞

### 1.Hello World ###

一个简单的react的例子

ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );

它渲染了一个 “Hello, world!” 的标题。

**React是一个JavaScript库**

### **2.JSX简介** ###

下面是一个JSX， 它是一种 JavaScript 的语法扩展，完全是在 JavaScript 内部实现的。

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

### 在 JSX 中使用表达式 ###

在 JSX 当中的表达式要包含在大括号里。

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

### JSX 本身其实也是一种表达式 ###

在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。

这也就意味着，你其实可以在 `if` 或者 `for` 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

function getGreeting(user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }

### JSX 属性 ###

你可以使用引号来定义以字符串为值的属性：

const element = <div tabIndex="0"></div>;

也可以使用大括号来定义以 JavaScript 表达式为值的属性：

const element = <img src={user.avatarUrl}></img>;

### JSX 嵌套 ###

如果 JSX 标签是闭合式的，那么你需要在结尾处用 `/>`, 就好像 XML/HTML 一样：

const element = <img src={user.avatarUrl} />;

JSX 标签同样可以相互嵌套：

const element = (
      <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
      </div>
    );

### JSX 防注入攻击 ###

你可以放心地在 JSX 当中使用用户输入：

const title = response.potentiallyMaliciousInput;
    // 直接使用是安全的：
    const element = <h1>{title}</h1>;

React DOM 在渲染之前默认会 [过滤][Link 1] 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 [XSS(跨站脚本)][XSS] 攻击。

### JSX 代表 Objects ###

Babel 转译器会把 JSX 转换成一个名为 `React.createElement()` 的方法调用。

下面两种代码的作用是完全相同的：

const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );

const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );

`React.createElement()` 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
    const element = {
      type: 'h1',
      props: {
        className: 'greeting',
        children: 'Hello, world'
      }
    };

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

### 3.元素渲染 ###

元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容：

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

## 将元素渲染到 DOM 中 ##

首先我们在一个 HTML 页面中添加一个 `id="root"` 的 `<div>`:

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 “根” DOM 节点。

const element = <h1>Hello, world</h1>;
    ReactDOM.render(element, document.getElementById('root'));

页面上会展示出 “Hello World” 字样。

## 更新元素渲染 ##

更新界面的唯一办法是创建一个新的元素，然后将它传入 `ReactDOM.render()` 方法：

看一下这个计时器的例子:

function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      ReactDOM.render(element, document.getElementById('root'));
    }
    
    setInterval(tick, 1000);

这个示例通过 [`setInterval()`][setInterval] 方法，每秒钟调用一次 `ReactDOM.render()`.

## React 只会更新必要的部分 ##

React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

# 4.组件 & Props #

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

## 函数定义/类定义组件 ##

函数定义组件

function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }

[ES6 class][]

class Welcome extends React.Component {
      render() {
        return <h1>Hello, {this.props.name}</h1>;
      }
    }

## 组件渲染 ##

在前面，我们遇到的React元素都只是DOM标签：

const element = <div />;

然而，React元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

例如,这段代码会在页面上渲染出”Hello,Sara”:

function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }
    
    const element = <Welcome name="Sara" />;
    ReactDOM.render(
      element,
      document.getElementById('root')
    );

我们来回顾一下在这个例子中发生了什么：

1.  我们对`<Welcome name="Sara" />`元素调用了`ReactDOM.render()`方法。
2.  React将`{name: 'Sara'}`作为props传入并调用`Welcome`组件。
3.  `Welcome`组件将`<h1>Hello, Sara</h1>`元素作为结果返回。
4.  React DOM将DOM更新为`<h1>Hello, Sara</h1>`。

## 组合组件 ##

组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。

例如，我们可以创建一个`App`组件，用来多次渲染`Welcome`组件：

## 提取组件 ##

你可以将组件切分为更小的组件，这没什么好担心的。

例如，来看看这个`Comment`组件：

function Comment(props) {
      return (
        <div className="Comment">
          <div className="UserInfo">
            <img className="Avatar"
              src={props.author.avatarUrl}
              alt={props.author.name}
            />
            <div className="UserInfo-name">
              {props.author.name}
            </div>
          </div>
          <div className="Comment-text">
            {props.text}
          </div>
          <div className="Comment-date">
            {formatDate(props.date)}
          </div>
        </div>
      );
    }

简单的提取一下

function Comment(props) {
      return (
        <div className="Comment">
          <UserInfo user={props.author} />
          <div className="Comment-text">
            {props.text}
          </div>
          <div className="Comment-date">
            {formatDate(props.date)}
          </div>
        </div>
      );
    }

## Props的只读性 ##

无论是使用[函数或是类][Link 2]来声明一个组件，它决不能修改它自己的props。来看这个`sum`函数：

function sum(a, b) {
      return a + b;
    }

**类似于上面的这种函数称为[“纯函数”][Link 3]，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。**

**所有的React组件必须像纯函数那样使用它们的props。**

[Link 1]: http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html
[XSS]: https://en.wikipedia.org/wiki/Cross-site_scripting
[setInterval]: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval
[ES6 class]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
[Link 2]: https://www.reactjscn.com/docs/components-and-props.html#%E5%87%BD%E6%95%B0%E5%AE%9A%E4%B9%89/%E7%B1%BB%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6
[Link 3]: https://en.wikipedia.org/wiki/Pure_function