React官方教程，传送门
那么我们开始吧！
- 创建新的单页应用。利用Create React App 创建一个React项目，它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。**注意，**需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。
npx create-react-app my-app （my-app为你的项目名称，可以自由定义）
cd my-app
npm start
- 我们会得到这样一个文件结构的项目
- 创建组件、 JSX语法
- 绑定数据 绑定对象
如下：
- 属性绑定。
需要注意的是：
- class 要变成 className
- for 要变成 htmlFor。
- 循环数据要加key
- 组件的构造函数中一定要注意 super。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象
- 属性的默认值和属性设定
-
绑定事件处理函数，以及将事件处理函数运行时的 this 指向当前组件实例的三种方法。
-
实现一个vue 的双向数据绑定
-
react执行生命周期
备注：
- 组件加载时候触发的函数，及执行顺序：
constructor --> componentWillMount --> render --> componentDidMount- 组件数据更新的时候触发的函数生命周期，及执行顺序：
shouldComponentUpdate —> componentWillUpdate --> render —> compoenntDidUpdate- 你在父组件里面改变props传值的时候触发的：
componentWillReceiveProps- 组件销毁时后触发：
componentWillUnmount
- 父子组件之间的数据传递
- React props父组件给子组件传值
---- 第一步： 在调用子组件的时候定义一个属性， <Modal msg=“首页”>
---- 第二步： 在子组件里面 this.props.msg 来获取值
说明： 1. 注意父组件不仅可以给子组件传值，还可以给子组件传方法 2. 可以以属性的方式把整个父组件传给子组件，通过这个方法还可以让子组件给父组件传值- 子组件给父组件传值
— 第一种： 通过属性将父组件实例以属性值的形式传递给子组件，然后在子组件中通过 this.props.* 调用方法，并将子组件的数据传出
— 第二种： 父组件中，给子组件通过属性绑定方法，在子组件中通过方法传出子组件中的值- 父组件中通过refs获取子组件属性和方法
— 第一步： 调用子组件的时候，制定ref值 <Modal ref=“modal”>
— 第二步： 通过调用this.refs.modal获取整个子组件的实例（dom（组件）加载完成以后获取）
- React 异常捕获
React 16 提供了一个内置函数 componentDidCatch， 使用它可以非常简单的获取到react下的错误信息
componentDidCatch (error, info) {
console.log(error, info)
}
UI的某部分引起的Js错误不应该破坏整个程序， 为了帮React的使用者解决这个问题，React 16 介绍了一种关于错误边界（error boundary） 的新观念
- 事件处理器
- 异步代码
- 服务端的渲染代码
- 在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 <h1>Something went wrong.</h1>
} else {
return this.props.children
}
}
}
export default ErrorBoundary;
然后，我们像使用普通组件那样使用它：
<ErrorBoundary>
<MyWidget />
</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组件本身的错误
