一、创建一个react项目
1、创建一个名字为“admin-master”的react项目
$ create-react-app admin-master
创建完成
2、进入项目，执行npm start
$ cd admin-master
$ npm start
启动成功
项目目录
3、执行 'npm run eject ' ,是的项目暴露配置文件，此时生成config,script两个文件。
$ npm run eject
允许执行
此时出现报错信息如下：This git repository has untracked files or uncommitted changes:
报错
报错原因：git 地址没有配好
依次执行：
git init
git add .
git commit -m 'init'
配置git
这会再次执行 npm run eject
执行成功
4、查看下目录结构
新增config、scripts目录
5、这里重点说下config目录
老版本
新本版
新版本将webpack.config.dev.js、webpack.config.prod.js合并成了一个文件webpack.config.js；所有的配置也都在这里，后面的配置也都会对这个文件进行操作
6、执行npm run build 打包看下项目,打开打包好的build/index.html在浏览器上运行发现是空白，这怎么办？原来是打包路径出现了问题，现在我们来配置下：package.json这个文件
添加一样代码："homepage": ".",
添加代码
现在在运行 npm run build后，在浏览器上打开build/index.html是不是成功了呢！
打包运行成功
二、了解组件的生命周期
组件在初始化时会触发5个钩子函数：
1、getDefaultProps()
设置默认的props，也可以用dufaultProps设置组件的默认属性。
2、getInitialState()
在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props。
3、componentWillMount()
组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
4、 render()
react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
5、componentDidMount()
组件渲染之后调用，可以通过this.getDOMNode()获取和操作dom节点，只调用一次。
在更新时也会触发5个钩子函数：
6、componentWillReceivePorps(nextProps)
组件初始化时不调用，组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候。不过调用this.forceUpdate会跳过此步骤。
8、componentWillUpdata(nextProps, nextState)
组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
9、render()
不多说
10、componentDidUpdate()
组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
还有一个卸载钩子函数
11、componentWillUnmount()
组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
以上可以看出来react总共有10个周期函数（render重复一次），这个10个函数可以满足我们所有对组件操作的需求，利用的好可以提高开发效率和组件性能。
网友评论