@xiaoqq 2016-11-10T07:51:28.000000Z 字数 3194 阅读 1295

React学习笔记-入门

React

最近各种瞎忙，找房子的事情把自己搞得心力憔悴，学习的效率也变得有点低下。前端正处于一个高速发展的阶段，要想通过自己的能力买房、还房贷，就必须努力学习新的技术。

React出来的时间挺久了，这个技术栈一直没有去补。虽然有学习的欲望，但是，接触之后发现，React的这个技术栈也太庞大了。

图1. React技术栈

如上图，目前我需要补足的技术是：

WebPack，前端的模块打包工具。学习起来有点繁琐，之前在学习Vue的时候学习过，虽然用起来有点不习惯，但是这是前端模块化的一个趋势；
ES6+Babel，拥抱ES6，ES6增加给JS注入了新鲜的血液，让其看起来更像一个“现代化”的语言，析构和Lambda表达式都让我爱不释手；
React，整个技术栈的核心；
Redux，状态管理工具，Vuex就是模仿了它。

一、React

举个最简单的例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

书写React需要引入两个库react.js和react-dom.js。
此外，如果使用JSX还需要引入browser.min.js，babel会帮我们把JSX语法转换为普通的JS语法。

React最基础的东西跟Vue一样是组件(component)，通过React.createClass来创建，然后使用ReactDOM.render渲染出来。
例如：

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Using props

和Vue类似，父组件向子组件通信使用属性，使用HTML的属性。不同的是，React在子组件中通过this.props.xxx访问。

props可以传递多种类型，甚至是一个对象

var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
// tutorial9.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

JSX写法注意：

我们坚信组件是正确方法去做关注分离，而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外，展示逻辑通常是很复杂的，通过模板语言实现这些逻辑会产生大量代码。

XML标签一定要写在()之中，表示立即执行，否则会报错；
XML标签中的属性表达式、子节点表达式一定要使用{}包裹起来。
使用展开属性，<Component {...props} />
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀；
组件属性必须采用驼峰式的写法，并且render中外层标签只能有一个；
class => className， for => htmlFor

动态交互用户界面

(其实就是讲如何使用state，感觉这里的state就类似于Vue中的data)

React 本身其实还算简单的。最简单的理解，一个组件的渲染函数就是一个基于 state 和 props 的纯函数，state 是自己的(内部控制)，props 是外面来的(外部控制)，任何东西变了就重新渲染一遍。

State的API：

this.state：组件的当前状态
getInitialState：获取组件的初始状态，在组件加载的时候会被调用一次，返回值赋予 this.state 作为初始值
this.setState：
组件状态改变时，可以通过 this.setState 修改状态
- setState 方法支持按需修改，如 state 有两个字段，仅当 setState 传入的对象包含字段 key 才会修改属性
- 每次调用 setState 会导致重渲染调用 render 方法
- 直接修改 state 不会重渲染组件

注意点：
1. 大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State；
2. 尝试把尽可能多的组件无状态化。这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程；
3. State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。

哪些不应该作为 State？

this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：

计算所得数据
React 组件：在 render() 里使用当前 props 和 state 来创建它。
基于 props 的重复数据

复合组件

生命周期

挂载(组件被注入DOM) => 更新(组件被重新渲染来决定DOM是否应被更新) =>卸载(组件从DOM中被移除)
will 方法，该方法在某事发生前被调用，did方法，在某事发生后被调用。

getInitialState(): object 在组件挂载前被调用。有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。

Mounting: componentWillMount
Mounting: componentDidMount (需要DOM node的初始化应该放在这里，比如获取数据渲染DOM)
Updating: componentWillReceiveProps(object nextProps): 当挂载的组件接收到新的props时被调用。
Updating: shouldComponentUpdate(object nextProps, object nextState) 当组件决定任何改变是否要更新到DOM时被调用
Updating: componentWillUpdate(object nextProps, object nextState) 在更新发生前被立即调用。你不能在此调用this.setState()。
Updating: componentDidUpdate(object prevProps, object prevState)
Unmounting: componentWillUnmount