一些杂项

最新推荐文章于 2025-10-28 19:18:17 发布

原创最新推荐文章于 2025-10-28 19:18:17 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

227 篇文章

订阅专栏

本文介绍Redux-devTools的安装和配置过程，并演示如何使用它来监控Redux的状态树Store变化，包括创建DevTools组件、通过DevTools.instrument()扩展store，以及如何在应用中渲染DevTools。

Redux-devTools

转自简书：http://www.jianshu.com/p/a2d4c1856560

redux-devtools 是一个非常棒的工具，它可以让你实时的监控Redux的状态树的Store

创建：

import React from 'react'

//从redux-devtools中引入createDevTools
import { createDevTools } from 'redux-devtools';

//显示包是单独的，要额外指定
import LogMonitor from 'redux-devtools-log-monitor';
import DockMonitor from 'redux-devtools-dock-monitor';

//创建DevTools组件
const DevTools = createDevTools(
  <DockMonitor toggleVisibilityKey='ctrl-h'
               changePositionKey  ='ctrl-q'>
    <LogMonitor theme='tomorrow' />
  </DockMonitor>
);

export default DevTools

用DevTools.instrument()通过redux的compose来扩展store

import {createStore,applyMiddleware,compose} from 'redux'
import rootReducer from './modules/reducers'

import thunk from './middleware/thunk'
import DevTools from '../containers/DevTools'

const enhancer = compose(
  //你要使用的中间件，放在前面
  applyMiddleware(thunk),
  //必须的！启用带有monitors（监视显示）的DevTools
  DevTools.instrument()
)

export default function createStoreWithMiddleware(initialState){
  //注意：仅仅只有redux>=3.1.0支持第三个参数
  const store = createStore(rootReducer,initialState,enhancer)
  return store
}

compose(…functions)

从右到左来组合多个函数。

这是函数式编程中的方法，为了方便，被放到了 Redux 里。
当需要把多个 store 增强器依次执行的时候，需要用到它。

参数
(arguments): 需要合成的多个函数。预计每个函数都接收一个参数。它的返回值将作为一个参数提供给它左边的函数，以此类推。例外是最右边的参数可以接受多个参数，因为它将为由此产生的函数提供签名。（译者注：compose(funcA, funcB, funcC) 形象为 compose(funcA(funcB(funcC())))）

返回值
(Function): 从右到左把接收到的函数合成后的最终函数。

Render DevTools in your App

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import TodoApp from './components/Counter';

//注意，不要直接这样做，要区分开发环境和生产环境
import DevTools from './containers/DevTools';

const store = configureStore();

render(
  <Provider store={store}>
    <div>
      <Counter />
      <DevTools />
    </div>
  </Provider>
  document.getElementById('app')
);

ReactDOM

React提供的获取DOM元素的方法

findDOMNode

当组件被渲染到DOM中后，findDOMNode返回该React组件实例响应的DOM节点。

componentDidMount() {
    const dom = ReactDOM.findDOMNode(this);
}

注意：findDOMNode只对已经挂载的组件有效。

render

把React渲染的Virtual DOM渲染到浏览器的DOM中。

当组件初次渲染后再次更新的时候，React不会把整个组件重新渲染一次，而是会使用DOM diff算法做局部的更新。

refs

它是一个组件特殊的prop，可以附加到任何一个组件上。组件被调用的时候，会新建一个该组件的实例，而refs就会指向这个实例。

<input type="text" ref={(ref) => this.myTextInput = ref} />

这样，我们就可以得到input组件的真正实例。

refs同样支持字符串，对于DOM操作，不仅可以用findDOMNode获得该组件的DOM，还可以使用refs获取组件内部的DOM。

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom';

class App extends Component {  
    componentDidMount() {
        const myComp = this.refs.myComp;
        const dom = findDOMNode(myComp);
    }
    render() { 
        return (
            <div>
                <Comp ref="myComp" />
            </div> 
        );
    } 
}