react chrome开发者工具

司徒正美 edited this page Sep 1, 2017 · 3 revisions

anu完全兼容官方的chrome开发者工具

先到这里

image

然后

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .aaa {
            width: 200px;
            height: 200px;
            background: red;
        }
       .bbb {
            width: 200px;
            height: 200px;
            background: lawngreen;
        }
    </style>
    <script type='text/javascript' src="./dist/React.js"></script>
    <script type='text/javascript' src="./lib/devtools.js"></script>
    <script src="./test/redux.js"></script>
    <script src="./test/react-redux.js"></script>
    <script src="./test/babel.js"></script>
    <script type='text/babel'>
      
        class App extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    aaa: 'aaa'
                }
            }
            change(a){
                this.setState({
                    aaa:a
                })
            }
            componentDidMount(){
                console.log('App componentDidMount')
            }
            componentWillUpdate(){
                console.log('App componentWillUpdate')
            }
            render() {
                 return this.state.aaa === 'aaa' ?  <Inner className={this.state.aaa} />:
             <Inner2 className={this.state.aaa} />
             
            }
        }

        class Inner extends React.Component{
             constructor(props){
                super(props)
            }
            componentWillMount(){
                console.log('Inner componentWillMount')
            }
            componentDidMount(){
                console.log('Inner componentDidMount')
            }
            
            componentWillUpdate(){
                console.log('Inner componentWillUpdate')
            }
            componentDidUpdate(){
                console.log('Inner componentDidUpdate')
            }
            componentWillUnmount(){
                console.log('Inner componentWillUnmount')
            }
            render() {
                return  <div className={this.props.className}>xxx</div> 
            }

        }
        class Inner2 extends React.Component{
            constructor(props){
                super(props)
            }
            componentWillMount(){
                console.log('Inner2 componentWillMount')
            }
            componentDidMount(){
                console.log('Inner2 componentDidMount')
            }
             componentWillUpdate(){
                console.log('Inner2 componentWillUpdate')
            }
            componentWillUnmount(){
                console.log('Inner2 componentWillUnmount')
            }
            render() {
                return  <strong className={this.props.className}>yyy</strong>
            }

        }

var s 
window.onload = function(){
   s = ReactDOM.render( <App/>, document.getElementById('example'))
}
    </script>

</head>
<body>

    <div>开发者工具</div>
    <div id='example'></div>
</body>

</html>

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.