react入门

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 } }