记录react学习流程

• 一、准备环境

1. Node中文网址：http://nodejs.cn/ ，下载安装。
2. 检查是否安装成功：

　　　　（1） node -v   //检查node版本

　　　　（2）npm -v  //检查npm版本  后续可自行安装淘宝镜像

　　　　　　(npm install -g cnpm --registry=https://registry.npm.taobao.org)

 

• 二、创建项目

1. 安装脚手架

　　　　官方脚手架：create-react-app

　　　　npm install -g create-react-app

　　2.创建

　　create-react-app 项目名  //例 create-react-app demo1

　　注：

　　1.这里我用的淘宝镜像安装的脚手架，然后创建项目的时候报错了。

　　

 

 

 　　后来百度了下，运行npm cache verify，然后没问题了。

　　2.创建超级慢！！

　　create-react-app下载默认用的npm，可以设置registry为淘宝镜像

　　（1）npm config set registry https://registry.npm.taobao.org  //配置

　　（2）npm config get registry  //检查是否变更成功

　　

• 三、启动

　　cd到对应目录下，然后npm start就可以启动项目啦。

 

　　四、学习过程

　　　　1.引用组件首字母要大写

　　　　　　

 

 　　　　2.开发工具 react-devtools

　　　　　　下载地址，git搜索react-devtools，在v3分支上可下载，之后按照介绍install后打包，在谷歌浏览器右上角三个点->更多工具->扩展程序内,加载已解压扩展程序，选择下载文件中shell/chrome/build/unpacked文件夹即可添加扩展工具。

　　　　　　

　　加载效果如图：

 

 　　浏览器添加工具后，右上角图表为灰色：当前页非react开发，黑色：reactx为生产环境（已打包后的），红色：为react项目的开发环境。

 

 　　3.prop-types校验

 　　　import PropTypes from 'prop-types';

　　　1.校验：PropTypes.string.isRequired 

　　　2.设置默认值：defaultProps

　　　

　　4.React声明周期的四个大阶段：

　　　　Initialization:初始化阶段，Mounting: 挂在阶段，Updation: 更新阶段，Unmounting: 销毁阶段。

　　　　Mounting阶段:

　　　　　　componentWillMount : 在组件即将被挂载到页面的时刻执行;（改名为 UNSAFE_componentWillMount）

　　　　　　render : 页面state或props发生变化时执行。

　　　　　　componentDidMount : 组件挂载完成时被执行。

　　　Updation阶段：

　　　　　　shouldComponentUpdate：在组件发生改变前，需return布尔值，确认组件是否更新（在render之前执行）

　　　　　　UNSAFE_componentWillUpdate：在组建更新之前，需return布尔值，shouldComponentUpdate之后，render之后执行

 　　　　　　componentDidUpdate：在组件更新之后执行，更新的最后一个环节

　　　　　　UNSAFE_componentWillReceiveProps：顶层组件无props接收，不执行。组件第一次存在dom中不执行，已存在dom执行。

　　　　Unmounting阶段：

　　　　　　　componentWillUnmount：删除组件执行。

 　　5.动画库 react-transition-group