ReactJS组件生命周期在线测试

React ES6 lifecycles，用来学习和理解React界面组件的生命周期。

react, 教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2953
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

};

componentWillMount = () => {
		this.log("componentWillMount", false, "()");
	};
componentWillUnmount = () => {
		this.log("componentWillUnmount", false, "()");
	};

componentWillUpdate = () => {
		this.log("componentWillUpdate", false, "(nextProps, nextState, nextContext)");
	};
	componentDidUpdate = () => {
		this.log("componentDidUpdate", false, "(prevProps, prevState, prevContext)");
	};

shouldComponentUpdate = () => {
		this.log("shouldComponentUpdate", false, "(nextProps, nextState, nextContext)");
		return true;
	};

// Called only once 
	componentDidMount = () => {
		this.log("componentDidMount", false, "(prevProps, prevState, prevContext)")
	};

// NOT CALLED IN ES6
	getInitialState = () => {
		this.log("getInitialState", false, "()");
	};
	// NOT CALLED IN ES6
	getDefaultProps = () => {
		this.log("getDefaultProps", false, "()");
	};
	// NOT CALLED IN ES6
	componentWillReceiveProps = () => {
		this.log("componentWillReceiveProps", false, "(nextProps)");
	};

// This is a non-react-native function
	increment = () => {
		this.log("increment", true, "()")
		this.setState({
			count: this.state.count + 1
		});
	};
	render() {
		this.log("render", false, "()");
		return (
			<button className="btn btn-primary" onClick={this.increment}>Clicked {this.state.count} time{(this.state.count>1 || this.state.count===0) ? 's' : ''}</button>

)
	}
}

var lifecycle = ReactDOM.render(
	<Button/>, document.querySelector('.react'));

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700|Open+Sans:400,800);
html,
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background: #eee;
}
body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.render {
    background: lightgreen;
}
.scroll {
    height: 14em;
    max-height: 14em;
    overflow: auto;
    overflow-x: hidden;
}
.user {
    color: grey;
}
.list {
    font-family: 'Inconsolata', monospace;
}
a[target]:after {
    content: " ↗";
    color: black;
}
.center {
    text-align: center;
}
.fail {
    background: #efc7c7;
}
.list-inline li:not(:last-child):after {
    content: " → ";
}
.col-xs-12 {
    background: rgba(0, 0, 0, .1);
    border-width: 0;
    font-weight: 700;
}
code,
pre,
.mono {
    font-family: 'Inconsolata', monospace;
}
.list {
    font-size: 14pt;
}
/* Borrowed from Lea Verou Pure CSS scrollbox 
http://lea.verou.me/2012/04/background-attachment-local/
*/

.scrollbox {
    overflow: auto;
    margin: 0 auto;
    background:
    /* Shadow covers */
    
    linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
    /* Shadows */
    
    radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background:
    /* Shadow covers */
    
    linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
    /* Shadows */
    
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    /* Opera doesn't support this in the shorthand */
    
    background-attachment: local, local, scroll, scroll;
}

HTML

<table class="table table-striped table-bordered">
            <tr class="row">
                <th class="col-xs-3">Event</th>
                <th class="col-xs-1 center">ES5</th>
                <th class="col-xs-1 center">ES6</th>
                <th class="col-xs-5">Description</th>
                <th class="col-xs-3">When</th>
            </tr>
            <tr class="row">
                <td class="col-xs-12" colspan="5">Mounting</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#getinitialstate" target="_blank">getInitialState</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1 fail">&cross;</td>
                <td class="col-xs-5">Returns initial <strong>state</strong>
                </td>
                <td class="col-xs-3">Once</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#getdefaultprops" target="_blank">getDefaultProps</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1 fail">&cross;</td>
                <td class="col-xs-5">Returns initial <strong>props</strong>
                </td>
                <td class="col-xs-3">Once (cached)</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount" target="_blank">componentWillMount</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">your before-component is mounted functionality</td>
                <td class="col-xs-3">Once</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#render" target="_blank">render</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">Returns HTML to render
                    <br>
                    <h5>Example from this component</h5>
                    <pre>&lt;button className="btn btn-primary"
onClick={this.increment}&gt;
Clicked {this.state.count} time{(this.state.count&gt;1 || this.state.count===0) ? 's' : ''}
&lt;/button&gt;</pre>
                </td>
                <td class="col-xs-3">Every time</td>
            </tr>

<tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount" target="_blank">componentDidMount</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">called after component has been rendered in DOM</td>
                <td class="col-xs-3">Once</td>
            </tr>
            <tr class="row">
                <td class="col-xs-12" colspan="5">Updating</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops" target="_blank">componentWillReceiveProps</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">called before render when <strong>props</strong> is about to change</td>
                <td class="col-xs-3">Prop changes</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate" target="_blank">shouldComponentUpdate</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">stop rendering by returning <code>false</code>
                </td>
                <td class="col-xs-3">Before render</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate" target="_blank">componentWillUpdate</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">Just <em>before</em> <code>render</code> this method is ivoked</td>
                <td class="col-xs-3">Immediately before render</td>
            </tr>
            <tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate" target="_blank">componentDidUpdate</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">Just <em>after</em> <code>render</code> this method is ivoked</td>
                <td class="col-xs-3">Immediately after render</td>
            </tr>
            <tr class="row">
                <td class="col-xs-12" colspan="5">Unmounting</td>
            </tr>

<tr class="row">
                <td class="col-xs-3"><a href="https://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount" target="_blank">componentWillUnmount</a>
                </td>
                <td class="center col-xs-1">&check;</td>
                <td class="center col-xs-1">&check;</td>
                <td class="col-xs-5">Just <em>before</em> the component is removed from DOM</td>
                <td class="col-xs-3">Once</td>
            </tr>

</table>

</div>

</div>
<div class="container">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br /> &nbsp;
</div>
<script src='/libs/react/react-15.1.0.min.js'></script>
<script src='/libs/react/react-dom-15.1.0.min.js'></script>

React ES6 lifecycles，用来学习和理解React界面组件的生命周期。

react, 教程

编辑器支持Emmet

快捷键

React ES6 lifecycles，用来学习和理解React界面组件的生命周期。

react, 教程

ReactJS多边形在线构造器

使用ReactJS的SVG过滤器组件实现的弯曲卡通人物肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：