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";