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组件本身的错误