react知識點總結（持續更新。。。）

時間 2019-11-13

標籤 react 知識總結持續更新欄目 React 简体版

原文原文鏈接

1、webpack

1、 什麼是以及爲何要使用webpack

    如今的網頁功能愈來愈豐富，所須要的JavaScript和模塊也會不少，爲開發更加簡潔，出現瞭如下方法，如模塊化，scss，typescript等。
但有些語法是瀏覽器沒法識別的。因此須要用到webpack。
　　WebPack是模塊打包器，它會將瀏覽器不能支持不能識別的語言語法，打包轉換成瀏覽器可識別的語法，如（Scss，TypeScript等）。

二、 webpack 與 gulp 的區別

二者並沒有太多的可比性
1、webpack是爲模塊化提供解決方案；
2、gulp是前端自動化構建工具。

三、如何使用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

四、配置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-割-線-----------------------------------------------------------------------

2、react

一、react起源

React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。

二、特色

1.聲明式設計 −React採用聲明式，能夠輕鬆描述應用。
 
2.高效 −React經過對DOM的模擬（虛擬DOM），最大限度地減小與DOM的交互。　　
 
3.靈活 −React能夠與已知的庫或框架很好地配合。　　
 
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。
 
5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。
 
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

三、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

四、函數化編程及優勢

純函數的定義是，對於相同的輸入，永遠會獲得相同的輸出
https://zhuanlan.zhihu.com/p/21714695
 
函數式編程好處：
    代碼簡潔，開發快速
    接近天然語言，易於理解
    更方便的代碼管理
    易於"併發編程「
    代碼的熱升級

五、react基本語法

import React from "react";
import ReactDom from "react-dom";
 
ReactDom.render(
    Dom,    //組件時爲<App/>
    document.querySelector('#root'),
    ()=>{
        console.log("渲染完成")
    }
)
    參數1：須要渲染的組件或者虛擬DOM
 
    參數2：將渲染好的組件或者虛擬DOM放在哪一個標籤上
 
    參數3：回調函數

六、組件，以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;

七、生命週期函數

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中咱們可使用事件對象

八、組件傳值

父傳子
        在子組件標籤內部用自定義屬性進行傳遞 接受的時候經過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
                               })
                            })

九、定義外部默認狀態

定義外部默認狀態（）                      如：
    組件名稱.defaultProps = {                One.defaultProps = {
        key:val                                  val:"123"
    }                                        }

十、限制外部屬性的類型

限制外部屬性的類型
    
        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,

十一、

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。