React進階筆記

1. 事件監聽

React中使用onClick類似的寫法來監聽事件，注意this綁定問題 react裏嚴格遵循單項數據流，沒有數據雙向綁定，

所以輸入框要設置value和onChange 

handleChange(e){ this.setState({ name:e.target.value }) }
 <input type="text" value={this.state.name} onChange={(e)=>this.handleChange(e)} />

2.  PureComponent Vs Component  https://www.jianshu.com/p/c41bbbc20e65

3.  React.memo

React v16.6.0 之後的版本，可以使用 React.memo 讓函數式的組件也有PureComponent的功能 

4. HOC（Higher-Order Components） 高階組件

高階組件也是一個組件，但是他返回另外一個組件，產生新的組件可以對屬性進行包裝，甚至重寫部分生命週期 

const withKaikeba = (Component) => { const NewComponent = (props) => { return <Component {...props} name="開課吧高階組件" />; };return NewComponent; };

上面withKaikeba組件，其實就是代理了Component，只是多傳遞了一個name參數 

5. 高階組件最巧妙的一點，是可以鏈式調用。

import React, {Component} from 'react'
import {Button} from 'antd'
const withKaikeba = (Component) => {
    const NewComponent = (props) => {
        return <Component { ...props } name = "開課吧高階組件" / > ;
    };
    return NewComponent;
};
const withLog = Component => {
    class NewComponent extends React.Component {
        render() {
            return <Component { ...this.props }  />;
        }
        componentDidMount() {
            console.log('didMount', this.props)
        }
    } return NewComponent
}
class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>hi,{this.props.name}</h2 >
                < Button type="primary" > Button < /Button>
                </div >
             )
   }
   }
export default withKaikeba(withLog(App))

6. 高階組件裝飾器寫法

npm install --save-dev babel-plugin-transform-decorators-legacy

const { injectBabelPlugin } = require("react-app-rewired");
module.exports = function override(config) {
  config = injectBabelPlugin(
    [
      "import",
      {
        libraryName: "antd",
        libraryDirectory: "es",
        style: "css"
      }
    ],
    config
  );
  config = injectBabelPlugin(
    [
      "@babel/plugin-proposal-decorators",
      {
        legacy: true
      }
    ],
    config
  );
  return config;
};

使用裝飾器

import React, { Component } from 'react'
import { Button } from 'antd'
const withKaikeba = (Component) => {
    const NewComponent = (props) => {
        return <Component { ...props } name="開課吧高階組件" />;
    };
    return NewComponent;
};
const withLog = Component => {
    class NewComponent extends React.Component {
        render() {
            return <Component {  ...this.props } />;
        }
        componentDidMount() {
            console.log(Component.name, 'didMount', this.props)
        }
    } return NewComponent
}
@withKaikeba 
@withLog 
class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>hi,{this.props.name}</h2 >
                < Button type="primary" > Button < /Button> 
                </div > 
            )
        }
}
export default App

7.  按需加載

1.安裝react-app-rewired取代react-scripts，可以擴展webpack的配置 ，類似vue.confifig.js

npm install [email protected] babel-plugin-import --save

 

2.根目錄創建config-overrides.js 文件

const {injectBabelPlugin} = require('react-app-rewired');

module.exports = function override(config, env) {

    config = injectBabelPlugin(
        ['import', {libraryName: 'antd', libraryDirectory: 'es', style: 'css'}],
        config
    );

    config = injectBabelPlugin([
        "@babel/plugin-proposal-decorators",
        {
            "legacy": true
        }
    ], config);

    return config;

};

3.把package.json的react-script 替換爲 react-app-rewired

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build && mkdir ./build/views/ && mv ./build/index.html ./build/views/",
    "test": "react-app-rewired test --env=jsdom"
  }

 8. 阻止事件冒泡

 onClick={e=>{
         e.nativeEvent.stopImmediatePropagation(); //PC
         e.stopPropagation(); // 移動
}}

9.webpack配置路徑別名alias

 

 

 

 

 

 

導入組件時  提示 Module is not installed

解決方法：配置idea的js下面的webpack設置

 

修復後

 

 並且可以跳轉

 10.react-loadable 組件切割/組件按需加載 避免打包後js文件都混在一個文件內，導致客戶加載時間過長，影響體驗。

 

 

 

 使用 ：