React是Facebook研发的一款前端框架(MVC框架:侧重于view层操作),目前在行业内广泛使用。为了让框架的体积变得更轻量级,设计者们把其定义为“渐进式”框架,也就是:
- 主体核心的部分都在react/react-dom两个框架中
- 如果想使用路由,我们需要安装react-router
- 如果想使用redux进行状态统一管理,我们再安装redux/react-redux
- 如果想实现其它的功能,我们还可以继续安装 中间件/axious等 ...
- 根据用户所需,再安装不同的配套组件来完成,这就是"渐进式"设计思想(vue也是这样设计的)
这样的操作有好处,也有弊端,麻烦的是,开发中我们需要不断的安装各种组件,而且react独有的jsx语法是不能直接的被浏览器解析的,我们在编写程序过程中使用的es6/less等待都需要进行编译处理...
此时我们非常期待有一款自动化部署工具,可以帮助我们自动完成这些编译的操作,webpack就是目前项目中非常常用的自动化部署平台,我们在搭建项目之前,还需要自己配置webpack。 ... 类似于这样的操作还有很多,所以复杂繁琐的项目配置,模块安装等成为开发者们一大痛苦,有人调侃,是不是以后会出现"前端配置工程师"; 为了解决这些问题,市面上有很多react项目开发的脚手架:
- generator-z-react-cli
- create-react-app
- ... 通过这些脚手架,我们可以快速搭建一套完整的react项目结构,避免人工手动一点点配置。
create-react-app
FaceBook官方发布了一个无需配置,用于快速构建开发环境的脚手架工具:https://github.com/facebook/create-react-app
1.首先基于npm在全局安装create-react-app
npm install -g create-react-app
2.在指定目录中创建一个react项目工程
create-react-app my-app
my-app是自己设置的项目名称(遵循npm模块发布时的要求,例如,名字中布恩那个出现大写字母或者汉字以及特殊字符等)
3.进入到指定的项目文件,启动项目
cd my-app
npm run start 或者 $ yarn start(前提是在全局安装了yarn)
生产的结构目录:
my-app
|--build //构建目录,遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件
|
|-- node_modules //项目组件文件夹:所有安装的组件都在这
|
|--src //源码目录
| |--index.js //入口文件(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
|
|--public //静态页面目录
| |--index.html //主页面(还生成了其它的文件,但是没啥用,我们可以直接的删除掉)
|
|-- .gitignore //git提交的忽略文件,我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发,生成的文件)
|--package.json //项目依赖项及项目基础信息
|--README.md //项目描述
|-- ...
生成的package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": { //=>生产依赖项
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": { //=>可执行脚本
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
/*
* 可执行脚本注释:
* $ npm run start 启动服务,自动编译项目,可以实现边开发,边自动编译刷新,看到最新开发的效果
*
* $ npm run build 把项目整体进行编译,最后再bulid目录中生成项目编译后的文件,我们上传服务器的就是这些文件
*
* $ npm run test 使用Jest作为测试运行程序(不常用)
*
* $ npm run eject 下文具体介绍使用
*
* 当然以上操作也可以基于yarn来完成
*/
通过分析,我们发现create-react-app有如下的一些特点:
- 仅仅是安装了react中最常用的react/react-dom组件,其余的并没有安装,所以再项目开发中,我们根据需要,可能还会安装:$ yarn add redux react-redux react-router-dom prop-types等等
- 生成项目后,脚手架为了"优雅",隐藏了所有的webpack相关的配置文件,此时查看myapp文件夹目录,会发现找不到任何webpack配置文件;这也就导致了,如果我们需要在webpack中安装一些自己的loader或者plugin变的很困难;
- create-react-app自动生成的webpack中集成了:eslint(代码检测、url-loader(图片BASE64[小于10000kb的图片])、babel-loader(ES6和JSX语法解析)、style-loader、css-loader(CSS代码解析)、HtmlWebpackPlugin(产出HTML插件)等内容
- ...
npm run eject
上面提到,脚手架为了"优雅",隐藏了所有的webpack相关配置文件,如果我们想要基于原来的基础再次增加一些自己的东西,首先就要找到这些隐藏文件并且进行修改。
有的开发者直接到node_modules中去搜索webpack.config...等文件,然后进行修改,修改后发现生效了,但是当修改后,我们又安装了一些其它项目模块,重新编译的时候,又回到了原有的配置信息(很头疼的问题,总不能每一次安装新模块后,都重新改一次需要修改的配置吧...)
基于create-react-app创建完成项目后,会提供一个eject命令($ yarn eject),基于这个命令,可以把隐藏的webpack文件展示出来,方便我们二次进行配置。
$yarn eject或者npm run eject 此命令执行完成不可逆转(慎重使用)
执行完成后,我们可以看到原有的结构目录发生了一些变化(新增两个文件夹,package.json中的内容也跟着发生改变)
父组件传递子组件
属性(props)传递
属性(props)传递: 调取子组件的时候,把信息基于属性的方式传递给子组件(子组件Props中存储传递的信息);这种方式只能父组件把信息传递子组件,子组件无法直接的把信息传递给父组件,也就是属性传递(是单向传递的);
父到子(分两步)
父组件要做的事情
1.给父组件调用组件的的地方传参
<Child count={ {n:this.state.n,m:this.state.m} } />
子组件要做的事情
2.子组件需要
1.继承父组件的props属性
constructor(props){
super(props);
console.log(this.props);
}
2. 给需要用的的地方赋值
<div>m的值: { this.props.count.m }</div>
子到父(基于回调函数=>父组件把一个函数传递给子组件,也就是子组件执行了父组件的方法,还可以传递过去一些值,想把父组件的值改成啥就是啥)
父组件做的事
1. 定义一个函数
updateChange = (m)=>{
this.setState({
m: m
})
}
2. 调用子组件的地方传递
<Child
count={ {n:this.state.n,m:this.state.m} }
updateChange={ updateChange }
/>
代码
子组件做的事情
在要改变父组件状态的地方执行父组件传递进来的函数
<button onClick={()=>{
this.props.updateChange(6);
}}>改变m的值</button>
父组件
import React,{ Component } from 'react'
import PropTypes from 'prop-types'
import Child from './Child.js'
export default class parent extends Component{
constructor(){
super();
this.state = {
n : 10,
m : 10
}
}
updateChange = (m)=>{
this.setState({
m: m
})
}
render(){
return(
<div>
<div>n的值: { this.state.n } </div>
<div>m的值: { this.state.m }</div>
<Child
count={ {n:this.state.n,m:this.state.m} }
updateChange={ updateChange }
/>
</div>
)
}
}
子组件
import React,{ Component } from 'react'
import Grandson from './Grandson.js'
export default class Child extends Component{
constructor(props){
super(props);
console.log(this.props);
}
render(){
return(
<div>
<div>n的值: { this.props.count.n } </div>
<div>m的值: { this.props.count.m }</div>
<button onClick={()=>{
this.props.updateChange(6);
}}>改变m的值</button>
<Grandson count={ {n: this.props.count.n ,m:this.props.count.m } } />
</div>
)
}
}
上下文(context)传递
上下文传递: 父组件先把需要给后代元素(包括孙子元素)使用的信息都设置好(设置在上下文中),后代组件需要用到父组件用到中的信息,主动去父组件中调取使用即可.
父到子传参(分三步)
父组件要做的事情
// 1.设置上下文中信息的类型 static childContextTypes = { n: PropTypes.number, m: PropTypes.number }
// 2.获取子组件的上下文 getChildContext(){ // -> return的是啥,相当于给子组件上下文设置成啥. let { n,m } = this.state; return { n, m } }