React学习笔记

JSX简介

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、JSX

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React.createElement()

二、元素渲染

const element = <h1>Hello, 在这里插入代码片world</h1>;
ReactDOM.render(element, document.getElementById('root'));

仅使用 React 构建的应用通常只有单一的根 DOM 节点。
React 元素是不可变对象，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。【更新已渲染的元素】
React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。【React 只更新它需要更新的部分】

三、组件 & Props

1.函数组件与 class 组件

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

2.渲染组件

3.Props 的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props
所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

四、State & 生命周期

state通过setState()方法调用修改

State 的更新可能是异步的

不要依赖他们的值来更新下一个状态。
出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。
要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
// 或者
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

State 的更新会被合并

数据是向下流动的

state 为局部的或是封装的。除了拥有并设置了它的组件，其他组件都无法访问。 “自上而下”或是“单向”的数据流。任何的 state
总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

事件处理

在 JavaScript 中，class 的方法默认不会绑定 this。

• 箭头函数：

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

• 回调中使用箭头函数

render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }

每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop
传入子组件时，这些组件可能会进行额外的重新渲染。

• 构造器中绑定this

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

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

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

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

为事件处理函数传递额外的参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

条件渲染

阻止组件渲染：render 方法直接返回 null，而不进行任何渲染。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

列表 & Key

渲染多个组件给

需要给每个列表元素分配一个 key 属性

key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值：

状态提升

通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。

组合 vs 继承

推荐使用组合而非继承来实现组件间的代码重用。

包含关系

特例关系