react 学习日记

 

1、本地配置代理服务：   create-react-app 创建的react项目

     package.jsoin 中 加入:

  "proxy": "http://localhost:8000"

 即可。

2、react引入图片

    

import xxx from './xxx.png'
...

<img src={xxx} />
或

<img src={require('./xxx.png')} />

3、组件生命周期

装载组件触发

componentWillMount

只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render

componentDidMount

只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this)获取到组件的 DOM 节点。

更新组件触发

这些方法不会在首次 render 组件的周期调用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸载组件触发

• componentWillUnmount

 

3、嵌入复制插件

componentDidMount() {
        this._notificationSystem = this.refs.notificationSystem;
        let url = window.location.host + '/Bussiness/' + this.props.match.params.id;
        let v = this;
        new Clipboard('#copyBtn', {
            text() {
                v._notificationSystem.addNotification({
                    title: 'Success',
                    message: '已复制！',
                    autoDismiss: 3,
                    level: 'success',
                    position: 'tr'
                });
                return url;
            }
        });
    }

4、项目结构：

5、定义routes

     

import React from 'react'
import {BrowserRouter,Route} from 'react-router-dom'

import Home from '../views/Home'
import GamePage from '../views/GamePage'

const routes = (
    <BrowserRouter >
        <div>
            <Route path="/" component={Home} exact />
            <Route path="/game" component={GamePage} />
        </div>
    </BrowserRouter>
)

export default routes;

6、修改 node_modules\react-scripts\config\webpack.config.dev.js 中 ，以支持  css modules （样式模块化）

　　

test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: "[name]__[local]-[hash:base64:5]",
                },
              },

7、添加 装饰器支持 即： @connect 形式的注册 redux

　　

cnpm i --save-dev babel-plugin-transform-decorators-legacy

 

 　　修改 node_modules\react-scripts\config\webpack.config.dev.js 中

　　

{
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
              plugins: ["transform-decorators-legacy"]
            },
          },

 

8、  index.css 中引入 reset.css 必须  

@import "./assets/reset.css";