第一章：前言

与其说这是一个入门教程，不如说是我的自学笔记。大前端的时代，工程化，组件化的思想促成了前后端分工。前端不再满足小小的页面布局，正在扮演着愈发重要的角色。整理这套笔记，我也参考了很多东西。在学习过程中，我看了三套视频教程，传智的，IT营的，慕课网的。此外，还有必读的官网教程和一本书《深入浅出React和Redux》。这本书业界很有名，需要的点击书名即可下载，提取码：8e31。话不多说，下面开始正文。

React简介

火热程度 不夸张的说，背靠脸书的react从2013发布到现在，说是全球最火也不为过。当然，这种情况在国外更明显，国内目前还是vue占上风，但react市场份额同样不小。有这样一种说法，react和vue虚拟dom设计思想的出现，终究会引领新的潮流，传统主打操作dom的jQuery将逐渐退出舞台。

具体 目前国内的一二线互联网公司大部分都在使用React进行开发，比如阿里、美团、百度、去哪儿、网易 、知乎这样的一线互联网公司都把React作为前端主要技术栈。或者你可以去招聘网站看看，只要是前端，基本上三大框架都要求你至少懂一个，当然，更多的要求你懂vue或者react。至于angular，相对笨重，现在份额少的可怜。

React Fiber 这是一个新名词，指的是react16的版本，这一版本性能和易用度上，都有很大的提升。除了火爆的react本身，还有用于移动端开发的ReactNative和用于虚拟现实技术开发的React VR。所以说，react的前景非常广，前端学习react是大势所趋。最后留个图，自行体会。

在这里插入图片描述 * **学习react的优势

开车前的提醒

严格说，react 的学习门槛不是很高，但如果你还不知道什么是js，建议先去找门课程学一下。react对于彻底零基础的小白来说，还是有些不太好理解的地方，比如jsx语法，你会觉得很怪异。在这之前，如果你学过es6，node或者vue最好，这样你学起来会更容易。此外，你最好对包管理工具有一定的了解，项目中安装依赖会常用，比如npm或者脸书官方的yarn。

关于笔记阅读

首先，不得不重申一下，这只是笔记而已，没有视频教程。适合有一定基础的小白系统了解react使用，也适用于有一定react基础的人复习使用。基本上该上代码的地方都会上代码，也会标注我踩过的坑，这一点不必担心。如果代码量大，我会发个百度网盘链接放源码，代码量少就贴图或者粘贴代码。

划重点，这里讲的只是react入门基础，也只涉及react本身，没有redux之类的。

学习社区推荐–掘金

第二章：react vs vue

良好的生态系统，轻量级框架。
虚拟dom
数据驱动视图，组件化思想。
   
react优点  
灵活性和响应性：它提供最大的灵活性和响应能力。  
虚拟DOM：基于文档对象模型，允许浏览器友好地以HTML，XHTML或XML格式排列文档  
丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能。  
可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好。  
不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法。  
Web或移动平台: React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序  

缺点 陡峭的学习曲线：由于复杂的设置过程，属性，功能和结构，它需要深入的知识来构建应用程序。

与react相比，vue.js的下载量更少，并且主要用于构建有吸引力的单页面应用程序和Web应用程序。但是，vue.js具有适应性强的体系结构，使其成为广泛使用的框架之一，具有最新的库和包。

使用vue的优缺点 在这里插入图片描述

至此，理论介绍告一段落，开始飙车。请开个好车，比如vscode。

第三章：开发环境搭建

Node.js安装

在开始前，请确保你的电脑安装了node，不知道装没装，就命令行工具node -v 一下，有版本号是成功安装的 在这里插入图片描述

* 没安装也不要慌，打开Node中文网址：http://nodejs.cn/
* 下载对应你电脑的版本，要用**稳定版**，切记 。
* 如果你用的英文官网，请看下边这个图这个，表示稳定版本 *** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190622072553595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODEzNDkx,size_16,color_FFFFFF,t_70) * 当然，如果你安装过了，只要版本不是差特别多就没问题，不必重装

安装官方脚手架create-react-app

在这里插入图片描述

cd myapp
npm start

效果图 在这里插入图片描述 *** 在这里插入图片描述

第四章：目录结构介绍

安装完成并初始化项目后，打开项目文件夹，你会看到如下内容 我用的yarn，部分文件和npm的有差异，问题不大

在这里插入图片描述

   
README.md 项目说明文件，先不用管它，等托管github或实际工作使用以markdown语法编写就好
package.json webpack配置和项目包管理文件，里边有些命令脚本和依赖，先不用管它
lock文件 package-lock.json或者yarn.lock都是锁定安装版本号的，保证你托管GitHub后大家下载安装的依赖是一致的
gitignore git配置忽略文件，不需要上传的可以写里边，比如node_modules文件夹
node_modules 项目依赖包，如果你学过node，对这个应该很熟悉
public 开放出去的公共资源，如果你想读取本地json，请放这个目录下
src 放源码的位置，也是对我们开发者而言最核心的东西

public文件夹详解

mainifest.json：移动端配置文件，先不用管。

src文件夹详解

在这里插入图片描述

*.css ：样式表，不用管
App.js : 根组件
serviceWorker.js:移动端离线浏览相关，先不用管
logo.svg :一个小图片，也不用管

hello world初识

为了后续开发方便，我们把目录精简一下，去掉css，图片等没用的东西,来个hello world 在这里插入图片描述

App.js

import React from 'react';

function App() {
  return (
    <div >
      hello world
    </div>
  );
}

export default App;

在这里插入图片描述

第五章：类组件和函数组件的编写

在react中，一切皆组件。传统布局头部，左侧导航，主体内容，尾部，都可以看作是一个个组件，独立维护。这像搭积木，一块块的小组件最终搞出个小房子。react组件分为两种，函数组件和类组件，两者都会用到。相比之下，类组件更普遍，但如果组件中不涉及业务逻辑，函数组件更好用些。下边举个例子说明什么二者区别。

简单的函数组件

function App() {
  return (
    <Header/>
  );
}

在这里插入图片描述

仔细观察，你会发现App组件也是个函数组件。此外，组件不管是定义还是使用都是大写。确实这样，react中，区分组件和HTML标签的方式就是大小写。大写的以组件方式解析，小写的以HTML标签解析。对了，单双标签无所谓，看个人习惯。 ***

简单的类组件

真正有关键字定义类是es6开始的，用class。下面用类组件改写上述App函数组件，实现相同的效果，输出hello world

import React, {Component} from 'react'
class App extends Component{
    render(){
        return (
            <div>
                hello world
            </div>
        )
    }
}
export default App;

也许你不太理解上边的import React, {Component} from ‘react’，那个大花括号，是es6的语法，解构赋值，推荐参考下阮一峰大神的es6入门

import React from 'react';
const Component = React.Component;
class App extends Component {
  
  render() {
    return (
      <div>
        hello world
      </div>
    );
  }
}

export default App;

图片资源，样式表引用问题

在这里插入图片描述

第六章：jsx语法

jsx简介

jsx是Javascript和XML结合的一种语法糖，它可以让我们更快的编写代码，属于html+js混写。这种语法最先在react中使用，后来vue中也可以，但不常见。jsx语法用熟悉了自然是快的，但对初学者而言，并不是很容易理解。

jsx的优势 详情参见 https://www.cnblogs.com/clearyang/p/6899639.html

在这里插入图片描述

jsx踩坑

constructor(props){
  super(props)
  this.fun = this.fun.bind(this)      
}

onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}

{
	//jsx单行注释
}

  <h1>{false?"hello":"world"}</h1>

第七章 传统实例-todoList

新建TodoList

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';//注意点1
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<TodoList />, document.getElementById('root'));//注意点2
serviceWorker.unregister();

完善TodoList.js

import React,{Fragment} from 'react'
const Component = React.Component
class TodoList extends Component {
 
  render() {
    return (
      <Fragment>
        <div><input type="text" /> <button> 添加 </button></div>
               <ul>
                   <li>学习react</li>
                   <li>学习vue</li>
               </ul> 
     </Fragment>
    );
  }
}

export default TodoList;

第八章：响应式设计原理和数据的绑定方法

响应式设计

关于vue，react，jquery的一些思考

* 补充一点，虽然react，vue，angular都有操控dom的钩子ref，但都不建议操作dom解决问题，除非是一些不涉及数据本身的特殊问题。
* 在《深入浅出Reqct和Redux》这本书中，有这样一个观点：react天生就是取代jQuery的。
* 由于历史遗留问题，jquery的市场份额依旧不小，但操控dom性能消耗确实大。
* vue，react这种虚拟dom的设计思想底层仅仅是创建js对象，比较前后js对象是否一致，从而决定是否重新渲染，渲染哪部分。
* 相比之下，创建对象的性能消耗肯定比创建dom低很多，jquery退出历史舞台是大势所趋。

数据绑定

    constructor(props){
    //调用父类的构造函数，固定写法
    //虽然props不用可以不写，但官方推荐你这样写
        super(props) 
        this.state={
            inputValue:'' , // 关联input输入的值
            list:[]    //事务列表
        }
    }

如果你学过vue，这里会更容易理解，在数据绑定这一块，vue和react差不多

<input value={this.state.inputValue} type="text" />

事件绑定

 <input type="text" value={this.state.inputValue} onChange={this.changeInputValue} />

问题分析

一步步解决 解决问题1

changeInputValue(e){
      this.setState({
        inputValue:e.target.value
      })
    }

解决问题2

onChange={this.changeInputValue.bind(this)}

changeInputValue = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }

第九章：列表渲染

还是那句话，数据驱动试图，数据不能写死，下面我们把自己写死的两个li去掉，遍历状态里的list。为保证数据不为空，我们在list初始化的时候就加两个数据进去。 list: ['学习react','学习vue']

### 关于遍历子元素使用索引做key的弊端

之前说过，react是基于虚拟dom的，涉及diff算法。先看下下边这个图 ** 在这里插入图片描述 **

在这里插入图片描述 ***

添加事务

 enterAdd=(e)=>{
    if(e.keyCode===13){
      this.addTodoItem();
    }
  }

删除事务

  return <li key={item}  onClick={this.delTodoItem.bind(this,index)}>{item}</li>

 delTodoItem=(index)=>{
    let list=this.state.list;//备份下数据，不要直接修改
    list.splice(index,1)
    this.setState({
      list: list//其实这里可以简写为一个list
    })
  }

全部代码

import React, { Fragment } from 'react'
const Component = React.Component
class TodoList extends Component {
  constructor(props) {
    super(props) //调用父类的构造函数，固定写法，虽然props不用可以不写，但官方推荐你这样写
    this.state = {
      inputValue: '', // 关联input输入的值
      list: ['学习react','学习vue']    //事务列表
    }
  };

  changeInputValue = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  addTodoItem=()=>{
    this.setState({
      list: [...this.state.list,this.state.inputValue],
      inputValue:""
    })
  }
  enterAdd=(e)=>{
    if(e.keyCode===13){
      this.addTodoItem();
    }
  }

  delTodoItem=(index)=>{
    let list=this.state.list;
    list.splice(index,1)
    this.setState({
      list: list
    })
  }
  render() {

    return (
      <Fragment>
        <div>
          <input onKeyUp={this.enterAdd} type="text" value={this.state.inputValue} onChange={this.changeInputValue} />
          <button onClick={this.addTodoItem}> 添加 </button>
        </div>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li key={item}  onClick={this.delTodoItem.bind(this,index)}>{item}</li>
            })
          }
        </ul>
      </Fragment>
    );

  }
};

export default TodoList;

第十章 开发辅助

这里介绍一款好用的vscode插件。俗话说，磨刀不误砍柴工，刀快才好用，开发也是这个道理，有优秀的编辑器，优秀的插件，没理由不用啊。

插件推荐

在这里插入图片描述 ***

在这里插入图片描述 ***

自定义代码段

在这里插入图片描述 ***

## 第十一章 组件拆分

上边我们已经实现了todoList的基本功能，但是，都堆在一个文件里，不太好看，需要抽离一下。可以将每一个li抽成一个小组件TodoItem。

创建TodoItem小组件

import React, { Component } from 'react';
class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <h1>TodoItem</h1>
        );
    }
}

export default TodoItem;

试着在TodoList里边使用一下

TodoList.js

进一步拆分 *** 在这里插入图片描述

在这里插入图片描述 ***

父->子组件传值

问题关键

父组件–传方法–传索引 ** 在这里插入图片描述 子组件–定义方法–点击执行事件处理函数–本质就是执行父组件的删除方法 ** 在这里插入图片描述

全部代码

链接 提取码：x47l

第十二章：数据流方向

如果你之前学过angular，你应该知道双向数据绑定这个概念，指令是ng-model。angular是双向数据流，父子组件通信相对方便。但有些时候，我们不想儿子改变父亲的值，只能用，不能改。react这点最明显，vue中表单控件还有个v-model双向数据绑定的指令。

与jQuery结合

纠结点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   <script>alert($)</script>
  </body>
</html>

简介

如果你不是前端小白，懂最基础的调试，那你应该知道一个好的调试工具的重要性，比如谷歌开发者工具。火爆的react也有对应的调试工具，react developer tools。不想翻墙，用qq浏览器就行，它可以关联到谷歌应用商店，不用翻墙就能下载。

使用

使用

import PropTypes from ‘prop-types’

xxx.propTypes={
       p1:PropTypes.string.isRequired,
       p2:PropTypes.func,
       p3:PropTypes.number
}

xxx是类名（组件名） p表示传递过来的属性 其他的见明知意，不解释了

默认值defaultProps

xxx.defaultProps = {
 	   p:'...'
}

第十五章：ref的使用

说明

react，涉及dom操作的都不推荐，ref也是如此，当然，ref也不是一无是处。

简单使用

在这里插入图片描述 ***

第十六章：生命周期

初始化阶段

这个阶段主要是定义属性（props）和状态(state)，当然，还有this指向的绑定。 在构造函数中，constructor是一个特别的存在，算不算生命周期函数都行，看你怎么理解。 构造函数在类加载就会自动执行，完成数据初始化。 如果你学过java，这点应该体会的更清楚，有参构造，无参构造，构造方法重载巴拉巴拉。。。

Mounting阶段

componentWillMount

在组件即将被挂载到页面的时刻执行，只执行一次，没啥鸟用，就是个陪跑的对称函数.能在这里放的，直接放构造函数就行。

render

componentDidMount

组件挂载完成时被执行,只执行一次。这个好用，基本上ajax请求都在这里发。

补充：生命周期函数执行顺序与你书写顺序无关。

update阶段

componentWillReceiveProps

子组件接收到父组件传递过来的参数，且父组件render函数重新，非第一次存在dom中被执行，不太常用。

shouldComponentUpdate（nextProps,nextState）

该函数会在组件更新之前，自动被执行。它要求返回一个布尔类型的结果，必须有返回值，默认是true，如果是false，后续组件就不会进行更新。可以用来做性能优化，比较组件前后状态属性是否一致，不一致才去更新。

componentWillUpdate

用处不大，发生在组件更新前，如果shouldComponentUpdate返回false，这个函数就不执行了

componentDidUpdate

销毁阶段

componentWillUnmount

你也许会好奇，别的函数都是兄弟姐妹的，这个就没陪跑的吗？ 确实没有，销毁就销毁了，没啥好接着做的。 在这里可以做些善后工作，清除定时器啥的。

第十七章 axios发送 ajax请求

安装

npm install -save axios 或者 yarn add axios

使用

文档

const axios = require('axios');
import axios from 'axios' // 也行
axios.get(apiUrl)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

### 扩展–fetch-jsonp

安装 npm install fetch-jsonp

使用

import fetchJsonp from 'fetch-jsonp'
fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

第十八章 生产环境vs开发环境

极致快vs高效率 * 前者代码需要压缩，后者不需要 * 前者删除注释，后者不需要 * 前者不需要热更新，后者需要 * 测试工具前者不需要，后者需要 * 语法检查工具前者不需要，后者需要 ** **

第十九章 动画–react-transition-group

第二十章 redux+antd+react实现todoList