react知识点总结（持续更新。。。）

一、webpack

 

1、 什么是以及为什么要使用webpack

    现在的网页功能越来越丰富，所需要的JavaScript和模块也会很多，为开发更加简洁，出现了以下方法，如模块化，scss，typescript等。
但有些语法是浏览器无法识别的。所以需要用到webpack。
　　WebPack是模块打包器，它会将浏览器不能支持不能识别的语言语法，打包转换成浏览器可识别的语法，如（Scss，TypeScript等）。

 

2、 webpack 与 gulp 的区别

两者并无太多的可比性
1、webpack是为模块化提供解决方案；
2、gulp是前端自动化构建工具。

 

3、如何使用webpack

1、全局安装webpack
                    cnpm install webpack@3.5.3 -g
 
2、创建文件夹  初始化文件夹
                    npm init -y
 
3、局部安装webpack
                    cnpm install webpack@3.5.3 --save-dev
 
4、创建 webpack.config.js
 
5、创建 src  dist  文件夹
 
6、处理css的loader
 
                    cnpm install --save-dev style-loader css-loader  sass-loader node-sass
 
7、处理js的loader
                    cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
 
8、插件
                    cnpm install html-webpack-plugin --save-dev;
 
9、热更新  服务器
                    cnpm install webpack-dev-server@2 --save-dev;
10、配置package.json 中的 script
                    "dev":"webpack-dev-server --open",
11、运行打包
                    webpack

 

4、配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const PATH = {
    app:path.join(__dirname,"./src/index.js"),
    build:path.join(__dirname,"./dist")
}
//下面的代码都是 webpack的配置项
module.exports = {
    entry:{
        app:PATH.app
    },
    output:{
        filename:"[name].js",//app.js
        path:PATH.build
    },
    //做模块的处理 用loader进行处理
    module: {
        rules:[
            {
                test:/.js$/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/env","@babel/react"]
                    }
                }
            },
            {
                test:/.(css|scss)$/,
                use:["style-loader","css-loader","sass-loader"]//loader的执行顺序是从下至上 从右至左
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html",
            template:"./index.html",
        })
    ]
}

 

 

------------------------------------------------华-丽-webpack-割-线--------------------------------------------------------------------

 

-------------------------------------------------华-丽-react-割-线-----------------------------------------------------------------------

 

二、react

 

1、react起源

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

 

2、特点

1.声明式设计 −React采用声明式，可以轻松描述应用。
 
2.高效 −React通过对DOM的模拟（虚拟DOM），最大限度地减少与DOM的交互。　　
 
3.灵活 −React可以与已知的库或框架很好地配合。　　
 
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
 
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
 
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

 

3、react 与vue 相同与区别

react:约束性比较小  灵活度比较高   (没有指令)   语法jsx语法
 
vue：约束性比较大  灵活度比较低    vue速度快   templates
 
React 和 Vue 有许多相似之处，它们都有：
* 使用 Virtual DOM
* 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
* 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
https://cn.vuejs.org/v2/guide/comparison.html#React
 
React 还是 Vue: 你应该选择哪一个Web前端框架？
    如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue
    如果你喜欢简单和“能用就行”的东西，请使用Vue
    如果你的应用需要尽可能的小和快，请使用Vue
    如果你计划构建一个大型应用程序，请使用React
    如果你想要一个同时适用于Web端和原生App的框架，请选择React
    如果你想要最大的生态圈，请使用React
    如果你已经对其中一个用得满意了，就没有必要换了
https://blog.csdn.net/yzh_2017/article/details/54909166

 

4、 函数化编程及优点

纯函数的定义是，对于相同的输入，永远会得到相同的输出
https://zhuanlan.zhihu.com/p/21714695
 
函数式编程好处：
    代码简洁，开发快速
    接近自然语言，易于理解
    更方便的代码管理
    易于"并发编程“
    代码的热升级

 

5、react基本语法

import React from "react";
import ReactDom from "react-dom";
 
ReactDom.render(
    Dom,    //组件时为<App/>
    document.querySelector('#root'),
    ()=>{
        console.log("渲染完成")
    }
)
    参数1：需要渲染的组件或者虚拟DOM
 
    参数2：将渲染好的组件或者虚拟DOM放在哪个标签上
 
    参数3：回调函数

 

6、组件，以App.js为例

import React ,{Component,Fragment} from "react";
 
    //constructor   初始化函数  可以用来存放当前组件所需要的一些状态
    //Component:所有组件的父类
    //在react当中所有的组件创建的时候必须首字母大写， 为了区分Element元素和组件的区别
 
class App extends Component{
    constructor(){
        //super必须要写
        super();
        this.state = {
            message:"wppp"
        }
    }
    render(){
        let {message} = this.state;
        return (
           //Fragment作用当做节点标签使用  但是不会被渲染成标签
           <Fragment>
                //事件与原生相同，注意用bind改变this指向App，（注：bind有返回值）
                //react中的函数不用加()
                <div onClick={this.handleClick.bind(this)}>{message}</div>
           </Fragment>
        )
    }
    handleClick(){
        //react中如果需要改变this.state里面的数据 需要用this.setState方法 当前方法是异步的方法
        //      用法为：
        //       参数1：对象   修改数据     //key:需要修改的状态  :  val:值
        //       参数2：回调   验证数据是否修改成功   同时可以获取到最新的DOM结构
 
              this.setState({
                key:val          
              },()=>{})
        this.setState({
            message:"1234"
        })
    }
}
 
export default  App;

 

7、生命周期函数

constructor:
        初始化生命周期函数  
 
        当前函数调用的时候必须掉用super方法，否则会报错  this的指向也会发生问题
 
        当前函数中可以用来定义当前组件所需要的状态 ，通过this.state
 
        如果当前生命周期函数中不传props的话，是访问不到外部属性的
        如果在当前生命周期函数中和super中传递了props那么就能访问到外部属性
 
componentWillMount：
        挂载前:
        constructor执行完毕以后就会执行当前生命周期函数，当前生命周期函数中可以接受到外部属性 可以将外部属性转换为内部属性
 
        在挂载之前是访问不到真正的DOM元素的
 
render:
    1、作用：渲染虚拟DOM
    2、特点：当rander渲染虚拟Dom的时候会将数据和虚拟Dom进行相结合生成真实的DOM结构，会将当前的虚拟DOm在缓存中保存一份，当数据发生改变的时候会将缓存中的虚拟Dom和第二次改变的虚拟Dom进行对比。修改需要改变的虚拟DOM节点 而不是改变所有的虚拟Dom   diff算法
    3、render函数什么时候会执行？
       当this.state的状态发生改变的时候render函数就会执行在表单当中如果设置了value值 那么就必须设置onchange方法  如果不需要事件的情况下 我们可以给当前元素设置一个defaultValue；在react中我们可以使用事件对象

 

8、组件传值

父传子
        在子组件标签内部用自定义属性进行传递 接受的时候通过this.porps进行接受
            如
                父组件中：<One val={message}></One>
                子组件中：let {val} = this.props
 
子传父
        在子组件标签内部用定义属性定义一个方法传递给子组件  子组件内部调用这个方法传递参数
            如：
                父组件中：<One send={this.handleSend.bind(this)}></One>   然后调用handleSend(val){ this.setState({ oneVal:val }) } 进行父组件值得修改
                子组件中：this.props.send(this.state.email)    ——可通过事件传递（如onclick等）
 
    注：this.props是用来接受外部属性的
 
非父子组件传值
        手动封装 $on  $emit  $off
        传值的一方调用$emit  接受值的一方调用$on
            如：
                传值组件中：Observer.$emit("handle",this.state.oneVal)  ——可通过事件传递（如onclick等）
                接收组件中：constructor中
                            Observer.$on("handle",(val)=>{
                               this.setState({
                               oneval:val
                               })
                            })

 

9、定义外部默认状态

    

定义外部默认状态（）                      如：
    组件名称.defaultProps = {                One.defaultProps = {
        key:val                                  val:"123"
    }                                        }

 

10、限制外部属性的类型

限制外部属性的类型
    
        1、下载第三方包
            cnpm install prop-types --save-dev
 
        2、引入 import PropTypes from "prop-types";
 
        3、校验
                                                        如
        组件名称.propTypes = {                            One.propTypes = {
            key:PropTypes.类型                                val:PropTypes.number
        }                                                 }
还包括：
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

11、