从零开始学react

React官方教程，传送门

那么我们开始吧！

1. 创建新的单页应用。利用Create React App 创建一个React项目，它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。**注意，**需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。

npx create-react-app my-app （my-app为你的项目名称，可以自由定义）
cd my-app
npm start

2. 我们会得到这样一个文件结构的项目
   
3. 创建组件、 JSX语法
   
4. 绑定数据 绑定对象
   
   如下：
   
5. 属性绑定。
   
   需要注意的是：

1. class 要变成 className
2. for 要变成 htmlFor。
3. 循环数据要加key
4. 组件的构造函数中一定要注意 super。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
5. 属性的默认值和属性设定
   

6. 绑定事件处理函数，以及将事件处理函数运行时的 this 指向当前组件实例的三种方法。
   

7. 实现一个vue 的双向数据绑定
   

8. react执行生命周期
   

备注：

1. 组件加载时候触发的函数，及执行顺序：
   constructor --> componentWillMount --> render --> componentDidMount
2. 组件数据更新的时候触发的函数生命周期，及执行顺序：
   shouldComponentUpdate —> componentWillUpdate --> render —> compoenntDidUpdate
3. 你在父组件里面改变props传值的时候触发的：
   componentWillReceiveProps
4. 组件销毁时后触发：
   componentWillUnmount

9. 父子组件之间的数据传递

1. React props父组件给子组件传值
   ---- 第一步： 在调用子组件的时候定义一个属性，
   ---- 第二步： 在子组件里面 this.props.msg 来获取值
   说明： 1. 注意父组件不仅可以给子组件传值，还可以给子组件传方法 2. 可以以属性的方式把整个父组件传给子组件，通过这个方法还可以让子组件给父组件传值
2. 子组件给父组件传值
   — 第一种： 通过属性将父组件实例以属性值的形式传递给子组件，然后在子组件中通过 this.props.* 调用方法，并将子组件的数据传出
   — 第二种： 父组件中，给子组件通过属性绑定方法，在子组件中通过方法传出子组件中的值
3. 父组件中通过refs获取子组件属性和方法
   — 第一步： 调用子组件的时候，制定ref值
   — 第二步： 通过调用this.refs.modal获取整个子组件的实例（dom（组件）加载完成以后获取）

10. React 异常捕获
    React 16 提供了一个内置函数 componentDidCatch， 使用它可以非常简单的获取到react下的错误信息

componentDidCatch (error, info) {
    console.log(error, info)
  } 

UI的某部分引起的Js错误不应该破坏整个程序， 为了帮React的使用者解决这个问题，React 16 介绍了一种关于错误边界（error boundary） 的新观念

1. 事件处理器
2. 异步代码
3. 服务端的渲染代码
4. 在error boundary 区域内的错误
   如下例子中， componentDidCatch (error, info ) 里的类会变成一个error boundary：

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false
     }
  }
  componentDidCatch (error, info) {
    // dispaly fallback UI
    this.setState({
      hasError: true
    })
    // You can also log the error to an error reporting service
    logErrorToMyServcice(error, info)
    console.log(error, info)
  } 
  render() { 
    if (this.state.hasError) {
      return 
Something went wrong.
    } else {
      return this.props.children
    }
  }
}
 
export default ErrorBoundary;

然后，我们像使用普通组件那样使用它：

注意：
1. componentDidCatch 方法像Js的catch{} 模块一样工作， 但是对于组件， 只有class类型的组件（class component） 可以成为一个error boundary.
2. 实际上，大多数情况下，我们可以在整个程序中定义一个error boundary组件，之后就可以一直使用它了
3. 如果需要报错信息显示错误组件所在的具体的行数和位置，可以使用babel-plugin-transform-react-jsx-source插件
4. try/catch模块

我们使用了Error Boundaries来抛出组件的内部异常，那么什么时候可以使用try / catch模块呢。我们知道Error Boundaries仅仅抛出了子组件的错误信息，并且不能抛出组件中的事件处理函数中的异常。（因为Error Boundaries仅仅能保证正确的render，而事件处理函数并不会发生在render过程中），我们需要用try/catch来处理事件处理函数中的异常.

注意事项

下面我们来看哪些情况下不能通过Error Boundaries来实现catch{}错误

（1）组件的内部的事件处理函数，因为Error Boundaries处理的仅仅是Render中的错误，而Hander Event并不发生在Render过程中。

（2）异步函数中的异常，Error Boundaries不能catch，比如setTimeout或者setInterval ,requestAnimationFrame等函数中的异常。

（3）服务器端的rendering

（4）发生在Error Boundaries组件本身的错误