React 脚手架

什么是脚手架

编程中提到的脚手架（Scaffold），其实是一种工具，帮我们可以快速生成项目的工程化结构；

每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的；

既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板；

不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可；

这样也可以间接保证项目的基本结构一致性，方便后期的维护；

它的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

React的脚手架：create-react-app

总结：脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷；

安装脚手架

npm install -g create-react-app全局安装
create-react-app --version查看版本
create-react-app react-app 创建项目
npm uninstall -g create-react-app  卸载脚手架
npm start启动项目

文件说明

• public ---- 静态资源文件夹
  
• favicon.icon ------ 网站页签图标

index.html -------- 主页面

logo192.png ------- logo图

logo512.png ------- logo图

manifest.json ----- 应用加壳的配置文件

robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

App.css -------- App组件的样式

App.js --------- App组件

App.test.js ---- 用于给App做测试

index.css ------ 样式

index.js ------- 入口文件

logo.svg ------- logo图

reportWebVitals.js — 页面性能分析文件(需要web-vitals库的支持)

setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

React 组件生命周期

组件的生命周期可分成三个状态：

1. Mounting：已载入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM

生命周期的方法有：

componentWillMount 在渲染前调用,在客户端也在服务端。

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount 在组件从 DOM 中移除之前立刻被调用。

生命周期在代码中的使用

class Child extends React.Component{
  componentWillMount(){
    console.log('componentWillMount -- 在渲染前调用')
  }
  componentDidMount(){
    console.log('componentDidMount -- 在第一次渲染后调用')
  }
  componentWillReceiveProps(newProps){
    console.log(newProps,'props')
    console.log('componentWillReceiveProps -- 在组件接收到一个新的props(更新后)被调用')
  }
  shouldComponentUpdate(newProps){
    console.log('shouldComponentUpdate -- 接收到一个新的props或者state时被调用')
    return true
  }
  componentWillUpdate(newProps){
    console.log('componentWillUpdate -- 接收到一个新的props但是还没有 render 时调用')
  }
  componentDidUpdate(){
    console.log('componentDidUpdate -- 组件完成更新后立即调用')
  }
  componentWillUnmount(){
    console.log('componentWillUnmount --组件从DOM中移除前调用')
  }
  render(){
    return (<div></div>)
  }
}
ReactDOM.render(<Button />,document.getElementById('app'))

总结：

以上就是 React 中脚手架，生命周期，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。