你必须知道的React基础知识

尽管我已经用过很长时间的，但是对于react的一些基础知识，还是处于朦朦胧胧的状态，今天就让我理清楚一些react的基础知识。

• React使用JSX
  

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

  第一次看见这个标签语法的时候会觉得很怪，因为它既不是字符串，也不是HTML。它被称为JSX，是javascript的语法扩展。它可以生成一个React元素。
  
  JSX可以防止注入攻击：
  React DOM在渲染所有输入的内容前，默认会进行转义。他可以确保在你的应用中，永远不会注入那些并非自己明确编码的内容，所有的内容在渲染之前都被转成了字符串。这样可以有效地防止XSS攻击。

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

   

• 组件
  组件分为函数组件和class组件。
  

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

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

  上述两个组件在 React 里是等效的。
  
  

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

  React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。

• 生命周期
  
  我们先来了解几个常听说的两个术语：挂载、卸载

  挂载：当组件第一次被渲染到DOM中
  卸载：当DOM中删除某个组件的时候

  了解了这两个概念之后，我们先来看一个简单的例子，能够说明常用的生命周期：
  
  

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

让我们来快速概括一下发生了什么和这些方法的调用顺序：

1. 当 <Clock /> 被传给 ReactDOM.render()的时候，React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。

2. 之后 React 会调用组件的 render() 方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。

3. 当 Clock 的输出被插入到 DOM 中后，React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中，Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的 tick() 方法。

4. 浏览器每秒都会调用一次 tick() 方法。 在这方法之中，Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用，React 能够知道 state 已经改变了，然后会重新调用 render() 方法来确定页面上该显示什么。这一次，render() 方法中的 this.state.date 就不一样了，如此以来就会渲染输出更新过的时间。React 也会相应的更新 DOM。

• 一旦 Clock 组件从 DOM 中被移除，React 就会调用 componentWillUnmount() 生命周期方法，这样计时器就停止了。
  
  通过这个例子，可以把常用的生命周期总结为下图：
  

   挂载：

  当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

  更新

  当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

  
  卸载：
  当组件从DOM中移除会调用：

  • componentWillUnmount()



  错误处理：
  当渲染过程，生命周期或子组件的构造函数中抛出错误时，会调用：

  • static getDerivedStateFromError()
  • componentDidCatch()

  
  
  不常用的生命周期图：
  

   

• 关于State你应该了解的三件事
  

不要直接用this.state修改state

构造函数是唯一可以给 this.state 赋值的地方，其他地方修改需要用setState();

this.setState({comment: 'Hello'});

 

state的更新可能是异步的

为什么是异步的呢？ The answer is given by Dan Abramov who is working on @reactjs and a co-author of Redux and Create React App

//箭头函数
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

//普通函数
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

 

state更新被合并

当state包含几个独立的变量，你可以分别调用setState来单独地更新它们，react会把你提供的对象合并到当前的state

• 状态提升
  在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。
  在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。