Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3c1e474

Browse files
author
vinogradov
committed
add lifecycle examples
1 parent 076f873 commit 3c1e474

File tree

5 files changed

+193
-3
lines changed

5 files changed

+193
-3
lines changed

‎src/entry.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
/* eslint-disable */
2-
import 'file-loader?name=[name].[ext]!./favicon.ico';
3-
/* eslint-enable */
1+
import 'file-loader?name=[name].[ext]!./favicon.ico'; // eslint-disable-line import/no-webpack-loader-syntax
42

3+
// import './examples/lifecycle/1.setState';
4+
// import './examples/lifecycle/2.props';
5+
// import './examples/lifecycle/3.redux';
56
import './examples/react/index';
67
// import './examples/redux/one-file';
78
// import './examples/redux/separate-files';

‎src/examples/lifecycle/1.setState.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
class Component extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
console.log('constructor'); // eslint-disable-line no-console
8+
this.state = {value: 1};
9+
10+
this.onClickHandler = this.onClickHandler.bind(this);
11+
}
12+
13+
componentWillMount() {
14+
console.log('componentWillMount'); // eslint-disable-line no-console
15+
}
16+
17+
componentDidMount() {
18+
console.log('componentDidMount'); // eslint-disable-line no-console
19+
}
20+
21+
componentWillReceiveProps() {
22+
console.log('componentWillReceiveProps'); // eslint-disable-line no-console
23+
}
24+
25+
shouldComponentUpdate() {
26+
console.log('shouldComponentUpdate'); // eslint-disable-line no-console
27+
return true;
28+
}
29+
30+
componentWillUpdate() {
31+
console.log('componentWillUpdate'); // eslint-disable-line no-console
32+
}
33+
34+
componentDidUpdate() {
35+
console.log('componentDidUpdate'); // eslint-disable-line no-console
36+
}
37+
38+
onClickHandler() {
39+
this.setState({value: 1});
40+
}
41+
42+
render() {
43+
console.log('render', this.props); // eslint-disable-line no-console
44+
45+
return <button onClick={this.onClickHandler}>setState</button>;
46+
}
47+
}
48+
49+
ReactDOM.render(
50+
<Component />,
51+
document.querySelector('#app')
52+
);

‎src/examples/lifecycle/2.props.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import {Component} from './component';
4+
5+
class ParentComponent extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = {value: 1};
9+
10+
this.onClickHandler = this.onClickHandler.bind(this);
11+
}
12+
13+
onClickHandler() {
14+
this.setState({value: 1});
15+
}
16+
17+
render() {
18+
return (
19+
<div>
20+
<button onClick={this.onClickHandler}>setState</button>
21+
<Component value={this.state.value} />
22+
</div>
23+
);
24+
}
25+
}
26+
27+
ReactDOM.render(
28+
<ParentComponent />,
29+
document.querySelector('#app')
30+
);

‎src/examples/lifecycle/3.redux.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import * as ReactDOM from 'react-dom';
3+
import {Provider, connect} from 'react-redux';
4+
import {createStore, applyMiddleware, combineReducers} from 'redux';
5+
import logger from 'redux-logger';
6+
import {Component} from './component';
7+
8+
const VALUE_1_INCREMENT = 'VALUE_1_INCREMENT';
9+
function value1Increment() {
10+
return {
11+
type: VALUE_1_INCREMENT
12+
};
13+
}
14+
15+
const VALUE_2_INCREMENT = 'VALUE_2_INCREMENT';
16+
function value2Increment() {
17+
return {
18+
type: VALUE_2_INCREMENT
19+
};
20+
}
21+
22+
function reducer(state = {value1: {deepProp: 0}, value2: 0}, action) {
23+
switch (action.type) {
24+
case VALUE_1_INCREMENT:
25+
return {
26+
...state,
27+
value1: {deepProp: state.value1.deepProp + 1}
28+
};
29+
case VALUE_2_INCREMENT:
30+
return {
31+
...state,
32+
value2: state.value2 + 1
33+
};
34+
default:
35+
return state;
36+
}
37+
}
38+
39+
const ConnectedComponent = connect(state => ({
40+
value: state.reducer.value1
41+
}))(Component);
42+
43+
const store = createStore(
44+
combineReducers({reducer}),
45+
applyMiddleware(logger)
46+
);
47+
48+
window.value1Increment = () => {
49+
store.dispatch(value1Increment());
50+
};
51+
52+
window.value2Increment = () => {
53+
store.dispatch(value2Increment());
54+
};
55+
56+
57+
ReactDOM.render(
58+
<Provider store={store}>
59+
<ConnectedComponent />
60+
</Provider>,
61+
document.querySelector('#app')
62+
);

‎src/examples/lifecycle/component.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
export class Component extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
console.log('constructor'); // eslint-disable-line no-console
8+
}
9+
10+
componentWillMount() {
11+
console.log('componentWillMount'); // eslint-disable-line no-console
12+
}
13+
14+
componentDidMount() {
15+
console.log('componentDidMount'); // eslint-disable-line no-console
16+
}
17+
18+
componentWillReceiveProps() {
19+
console.log('componentWillReceiveProps'); // eslint-disable-line no-console
20+
}
21+
22+
shouldComponentUpdate() {
23+
console.log('shouldComponentUpdate'); // eslint-disable-line no-console
24+
return true;
25+
}
26+
27+
componentWillUpdate() {
28+
console.log('componentWillUpdate'); // eslint-disable-line no-console
29+
}
30+
31+
componentDidUpdate() {
32+
console.log('componentDidUpdate'); // eslint-disable-line no-console
33+
}
34+
35+
render() {
36+
console.log('render', this.props); // eslint-disable-line no-console
37+
38+
return <span>{JSON.stringify(this.props.value)}</span>;
39+
// return null;
40+
}
41+
}
42+
43+
Component.propTypes = {
44+
value: PropTypes.shape({}).isRequired
45+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /