reactjs - 每次任何组件更新(包括路由更改)时调用函数

Question

是否可以在 React 中每次更新任何内容时调用一个函数？

更多背景信息:我想使用 EQCSS 的全部功能在 react 中。我已经尝试了 2 个 NPM 包，但它们似乎没有完全达到我的预期。

我想做的是，每次任何组件更新时，我都想调用EQCSS.apply()。

我尝试过调用componentDidUpdate，但这似乎在更改页面(使用react-router)时不起作用。

import React from "react";
import ReactDOM from "react-dom";

import { Router, Route, browserHistory } from "react-router";

import { MainLayout } from "./layouts";
import {
    HomePage,
    RankingsPage
} from "./routes";

class App extends React.Component {
    render() {
        return (
            <Router history={browserHistory}>
                <Route component={MainLayout}>
                    <Route path="/" component={HomePage} />
                    <Route path="/rankings" component={RankingsPage} />
                </Route>
            </Router>
        );
    }

    componentDidUpdate() {
        console.log("COMPONENT UPDATED");
        // This does not get called when changing pages.
    }
}

// Render the main component into the dom
ReactDOM.render(<App />, document.getElementById("app"));

Answer 1

以下是实现此目的的三种不同方法:

<小时/>

1. react 上下文

   • 演示:http://codepen.io/PiotrBerebecki/pen/GjvzdJ
   • React 文档:https://facebook.github.io/react/docs/context.html

<小时/>

MutationObserver

将您的主要父组件包装在 MutationObserver 中。更多信息请参见:

• https://developer.mozilla.org/en/docs/Web/API/MutationObserver
• https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

MutationObserver 将跟踪对实际 DOM 树的任何更改。

<小时/>

传递 vie props 的回调函数

我在这里演示了另一种方法:https://codepen.io/PiotrBerebecki/pen/wzqQkx 。请检查控制台，该控制台会在页面上每次发生事件时记录消息，包括路由更改或重新呈现深层嵌套的子组件。然而，这依赖于通过 props 通过子层次结构向下传递的回调。

广告 1. 上下文演示代码:

class App extends React.Component {
  static childContextTypes = {
    data: React.PropTypes.bool
  };

  getChildContext() {
    return {data: true};
  }
  render() {
    return (
      <div>
        <h1>Parent</h1>
        <Child />
      </div>
    )
  }
}


class Child extends React.Component {       
  static contextTypes = {
    data: React.PropTypes.bool
  };

  render() {
    console.log('in Child', this.context.data)
    return (
      <div>
        <h3>Child</h3>
        <Grandchild />
      </div>
    );
  }
}


class Grandchild extends React.Component {       
  static contextTypes = {
    data: React.PropTypes.bool
  };

  render() {
    console.log('in Grandchild', this.context.data)
    return (
      <div>
        <h6>Grandchild</h6>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('app')
);

广告3.回调演示代码:

var MainLayout = React.createClass({
  doSomething: function() {
    console.log('something happened');
  },

  render: function() {
    this.doSomething();
    const childrenWithProps = React.Children.map(this.props.children,
     (child) => React.cloneElement(child, {
       doSomething: this.doSomething
     })
    );

    return (
      <div className="app">
        <header className="primary-header"></header>
        <aside className="primary-aside">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/users">Users</Link></li>
            <li><Link to="/widgets">Widgets</Link></li>
          </ul>
        </aside>
        <main>
          {childrenWithProps}
        </main>
      </div>
      )
  }
})

var Home = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
})

var SearchLayout = React.createClass({
  render: function() {
    const childrenWithProps = React.Children.map(this.props.children,
      (child) => React.cloneElement(child, {
       doSomething: this.props.doSomething
     })
    );

    return (
      <div className="search">
        <header className="search-header"></header>
        <div className="results">
          {childrenWithProps}
        </div>
        <div className="search-footer pagination"></div>
      </div>
      )
  }
})

var UserList = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        User List
        <br />
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
});

var WidgetList = React.createClass({
  getInitialState: function() {
    return {
      counter: 1
    };
  },

  componentDidUpdate: function() {
    this.props.doSomething()
  },

  changeCounter: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        Widgets
        <br />
        <button onClick={this.changeCounter}>Click me</button>
        <br />
        {this.state.counter}
      </div>
    );
  }
})



ReactDOM.render((
  <Router>
    <Route path="/" component={MainLayout}>
      <IndexRoute component={Home} />
      <Route component={SearchLayout}>
        <Route path="users" component={UserList} />
        <Route path="widgets" component={WidgetList} />
      </Route> 
    </Route>
  </Router>
), document.getElementById('root'))