React学习笔记

1.环境安装和项目生成

（1）React是用于构建用户界面的声明性，高效且灵活的JavaScript库。它使您可以从孤立的小代码段（称为“组件”）组成复杂的UI。
React-native是来做移动端的，和react不同，相当于vue和uni-app的关系。
中文教程
React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。 最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。 React Native所使用的基础UI组件和原生应用完全一致。 你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。
（2）安装

安装：
sudo npm i -S react react-dom
react：react 是React库的入口点
react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上
如果使用JSX语法还需要安装
npm i -D babel-preset-react
项目创建
npx create-react-app {app-name}
项目运行
npm run start

（3）路由配置react-router
@阮一峰react-router2.x教程
@react-router5.x的使用(码农之家从安装到部署)
@react-router4.x（现在也能用）
@4.2包含路由重定向的方法
@5.x中switch、Link、NavLink

路由跳转使用示例

1.使用withRouter
import React from 'react';
import {withRouter} from 'react-router-dom';
import { Button} from 'antd';
class Demo extends React.Component{
  handleClick(event){
    this.props.history.push("/register");
  }
  render(){
    return(
      <div>
         <Button onclick={this.handleClick}>click me!</Button>
     </div>
    );
  }
}
export default withRouter(Demo);
2.使用prop-types
//安装依赖
 npm install prop-types
//在组件文件中
import PropTypes from 'prop-types';
//组件内
static contextTypes = {
    router: PropTypes.object
}
//触发事件中路由跳转
this.context.router.history.push(url)

(4) react的声明周期

@图解react的生命周期