React

React 是一个用于构建用户界面的 JavaScript库,React主要用于构建UI,也就相当于MVC中的view层。React实际上就是3个库文件，我们只需要引用就可以使用react:

  • react.js - React 的核心库
  • react-dom.js - 提供与 DOM 相关的功能
  • babel.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。

JSX

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

元素渲染

  1. const element = <h1>Hello, world!</h1>;
  2. ReactDOM.render ( //渲染元素的方法
  3.     element,
  4.     document.getElementById('example')  //获取渲染元素的根节点
  5. );
  • React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的,更新的方法就是重新渲染,所以元素一般用const来定义
  • React使用了虚拟DOM（REACT保存在内存中的一个虚拟DOM树）加diff算法来代替传统的DOM操作，首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

组件

对前端资源相同逻辑与静态元素的一种抽象。

  • React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。

  • propes关键字，用于在组件之间传递信息，由上层组件向下层组件传递数据；组件不能修改自身的props

    State

    保存当前组件的状态信息，每当前组件状态改变，重绘当前组件的UI，注意state是私有的，完全受控于当前组件

  • 不要直接修改state ```javascript // Wrong， 此代码不会重新渲染组件 this.state.comment = ‘Hello’;

// Correct， setState是唯一可以给this.state赋值的地方 this.setState({comment: ‘Hello’});


- State的更新可能是异步的，出于性能考虑，React 可能会把多个 `setState()` 调用合并成一个调用，此代码可能会无法更新计数器
```javascript
// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// 要解决这个问题，可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数，
// 将此次更新被应用时的 props 做为第二个参数：
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
  • state的更新会被合并

组件的生命周期

  1. componentDidMount，当该组件第一次被就渲染到dom中的时候执行，这在 React 中被称为“挂载（mount)”
  2. componentWillUnmount,当该组件在dom中被删除的时候执行，这在 React 中被称为”卸载（unmount）:
  3. https://zh-hans.reactjs.org/docs/react-component.html#updating