React 备忘录

流程

render

第二个方法，在react18中被遗留，但是我又是最容易理解的。 因为，非常容易与其他的非react成分交互。
第一种方法，最大的问题就是root的位置在哪里？

//
我可能被createRoot骗了，以为是创建了一个react新的容器，其实在html获取root 容器，挂载的。

root.render

点击查看代码

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

### ReactDOM.render `ReactDOM.render(, document.querySelector('#content'));`

组件

组件之中内置的方法

这些内置方法并不需要你进行调用，而是在属于生命周期的内容。也就是在整个组件进行使用的时候，会进行加载。类似于init，main等，会自动进行加载，而不需要手动调用。

定义组件

组件就是函数：

点击查看代码

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

或者可以用类表示：

点击查看代码

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

两者同等，这样我就比较倾向于第一种方式了。

组件的this绑定

看这一段代码：

点击查看代码

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

事实上，这个this绑定并不是绑定handleClick()，因为，这个调用在方法的内部。所以只能是为了绑定this.setState。哪位什么在constructor中绑定的handleClick呢？ 应该是将handleClick的作用域绑定到this中。

正常来说，类被创建后，this绑定的是实例。但是为什么在handleClick方法中，this却并不是实例呢？难道是因为调用方法的后，this会发生变化吗？在普通的试验之后，发现，并不是这样的。方法的在实例调用后this并没有发生变化，那这里为什么会发生变化呢？

我暂时不知道原因，这个需要看react中的工作原理才能得知。不过有一点却是可以提供思路：

点击查看代码

class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

渲染组件

const element = <Welcome name="Sara" />;当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

这里的组件参数name，是将会传递到一个对象，这个对象的功能类似于this，self这样的。通过props对象，组件得到相关的参数值。

点击查看代码

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);

我们调用 root.render() 函数，并传入 <Welcome name="Sara" /> 作为参数。
React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

这里的root.render()才是实现组件的关键。没有进行render，react是不知道有这么一个组件的，更不知道组件的使用。

note

注意： 组件名称必须以大写字母开头。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，

代表 HTML 的 div 标签，而 则代表一个组件，并且需在作用域内使用 Welcome。

经过试验，小写报错！

Prop

组件无论是使用函数声明还是通过 class 声明，都绝不能修改自身的 props。

组件中的组件

组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。但是，如果你将 React 集成到现有的应用程序中，你可能需要使用像 Button 这样的小组件，并自下而上地将这类组件逐步应用到视图层的每一处。

点击查看代码

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

## 提取组件的小组件 实际上，就是组件中的组件，将复杂的组件中的内容，创建一个新的组件，进行替换而已。

state

尝试不适用state，直接定义使用需要的数据变量。 发现，需要一个中间值，进行传递，否则，即使修改，也无法传递这个数据。

事件处理

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

传统的 HTML：

点击查看代码

<button onclick="activateLasers()">
  Activate Lasers
</button>

在 React 中略微不同：

点击查看代码

<button onClick={activateLasers}>
  Activate Lasers
</button>