Жизненный цикл React приложений

React application lifecycle
1 / 31

React + JSX
<Modal>
<ModalHeader>
<ModalTitle>Modaltitle</ModalTitle>
</ModalHeader>
<ModalBody>
Onefinebody...
</ModalBody>
<ModalFooter>
<Button>Close</Button>
<Buttontype="primary">Savechanges</Button>
</ModalFooter>
</Modal>
3 / 31

HTML
<divclass="modalfade">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true"
<h4class="modal-title">Названиемодали</h4>
</div>
<divclass="modal-body">
<p>Onefinebody…</p>
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"data-dismiss="modal">Закрыть</
<buttontype="button"class="btnbtn-primary">Сохранитьизменения</button>
</div>
</div>
</div>
</div>
4 / 31

Birth / Mounting
1. Initialize / Construction
5 / 31

Birth / Mounting
2. getDefaultProps()(React.createClass) or MyComponent.defaultProps(ES6 class)
6 / 31

Component props
importCowboyfrom'react';
exportdefaultclassPersonextendsReact.Component{
render(){
return(
<div>{this.props.name}(weapon:{this.props.weapon})</div>
);
}
}
<Personname="ClintEastwood"weapon="Colt45"/>
<div>ClintEastwood(weapon:Colt45)</div>
7 / 31

getDefaultProps()
importReactfrom'react';
classCowboyextendsReact.Component{
render(){
return(
<div>{this.props.name}(weapon:{this.props.weapon})</div>
);
}
}
Person.defaultProps={name:'Gringo',weapon:'unknown'};
<Personname="ClintEastwood"/>
<div>ClintEastwood(weapon:unknown)</div>
8 / 31

For react null is value
<Personname="ClintEastwood"weapon={null}/>
<div>ClintEastwood(weapon:)</div>
9 / 31

Birth / Mounting
3. getInitialState()(React.createClass) or this.state=...(ES6 constructor)
10 / 31

React state
constructor(props){
super(props);
this.state={isDead:false};
}
kill(){
this.setState({isDead:true});
}
render(){
return(
<div>
{this.state.isDead?
"(RIP)":
<buttononClick={()=>{this.kill()}}>Kill</button>}
{this.props.name}(weapon:{this.props.weapon})</div>
);
}
}
React state 11 / 31

Birth / Mounting
4. componentWillMount()
5. render()
12 / 31

render()
constructor(props){
super(props);
}
kill(){
this.state.isDead;//false
}
render(){
return(
<div>
{this.state.isDead?
"(RIP)":
<buttononClick={()=>{this.kill()}}>Kill</button>}
{this.props.name}(weapon:{this.props.weapon})
</div>
);
}
}
Context problem
13 / 31

Resolve context problem
1. Bind functions in constructor
constructor(props){
super(props);
this.kill=this.kill.bind(this);
}
2. Pass binded functions
<buttononClick={this.kill.bind(this)}>Kill</button>
3. Use autobind decorator on function decoration
@autobind
kill(){
this.state.isDead;//false
}
14 / 31

Birth / Mounting
5. render()
6. Children initialization & life cycle kickoff
15 / 31

Birth / Mounting
5. render()
6. Children initialization & life cycle kickoff
7. componentDidMount()
16 / 31

Growth / Update
1. componentWillReceiveProps()
18 / 31

Growth / Update
2. shouldComponentUpdate()
19 / 31

Growth / Update
20 / 31

Growth / Update
3. componentWillUpdate()
21 / 31

Component will update every time when
state or props changed
Default REACT implementation of componentWillUpdate:
componentWillUpdate(newProps,nextState){
constcurrentProps=this.props;
constcurrentState=this.state;
returntrue;
}
22 / 31

Growth / Update
4. render()(rerender)
23 / 31

Growth / Update
5. Children Life cycle methods
24 / 31

Growth / Update
6. componentDidUpdate()
26 / 31

Death / Unmount
1. componentWillUnmount()
3. Instance destroyed by Garbage Collector
27 / 31

JSX is not HTML
JSX code
<div>
<h4>Header</h4>
<button>pessme</button>
</div>
transforms to JS code
React.createElement(
"div",
null,
"h4",
null,
"Header"
),
"button",
null,
"pessme"
)
);
}
}]); 28 / 31

Test react using Jest
//Link.react-test.js
importLinkfrom'../Link.react';
importrendererfrom'react-test-renderer';
test('Linkchangestheclasswhenhovered',()=>{
constcomponent=renderer.create(
<Linkpage="http://www.facebook.com">Facebook</Link>
);
lettree=component.toJSON();
expect(tree).toMatchSnapshot();
//manuallytriggerthecallback
tree.props.onMouseEnter();
//re-rendering
tree=component.toJSON();
//manuallytriggerthecallback
tree.props.onMouseLeave();
//re-rendering
tree=component.toJSON();
});
29 / 31

Jest creates shapshots
/__tests__/__snapshots__/Link.react-test.js.snap
exports[`Linkchangestheclasswhenhovered1`]=`
<a
className="normal"
href="http://www.facebook.com"
onMouseEnter={[Function]}
onMouseLeave={[Function]}>
Facebook
</a>
`;
<a
className="hovered"
Facebook
</a>
`;
<a
className="normal"
Facebook
</a>
30 / 31

Жизненный цикл React приложений

More Related Content

Similar to Жизненный цикл React приложений (20)

More from GDG Odessa (9)

Recently uploaded (20)

Жизненный цикл React приложений