Igor Suvorov
Программист-предприниматель
Умные Компоненты
Занятие 4
4 Mar 2017
Профессия
Node.js & React.js developer
продвинутый курс
1
Умные vs Глупые
1
Умные vs Глупые
Smart vs Dump
Stateful vs Stateless
Контейнеры vs Компоненты
Логические vs Презентационные
JS vs CSS
Холивары
1
1
1
1
1
2
React Context
React
Component communication
2
React
1. Props
2
class TheChild extends React.Component {
}
class TheParent extends React.Component {
render() {
return (
<TheChild someProp="a" />
);
}
}React
2. Ref Functions
2
class TheChild extends React.Component {
myFunc() {
return 'hello';
}
}
class TheParent extends React.Component {
render() {
return (
<TheChild ref='foo' />
);
}
componentDidMount() {
var x = this.refs.foo.myFunc();
// x is now 'hello'
}
}React
3. Callback Functions
2
class TheChild extends React.Component {
onClick() {
this.props.handle(this.state);
}
...
}
class TheParent extends React.Component {
render() {
return (
<TheChild handle={this.handle} />
);
}
}React
4. Event Bubbling
2
class ParentComponent extends React.Component {
render() {
return (
<div onKeyUp={this.handleKeyUp.bind(this)}>
// Any number of child components can be added here.
</div>
);
}
handleKeyUp(event) {
// This function will be called for the 'onkeyup' event in any <input/>
// fields rendered by any of my child components.
}
}React
5. Parent compoent - Sibling
2
class ParentComponent extends React.Component {
render() {
return (
<div>
<SiblingA
myProp={this.state.propA}
myFunc={this.siblingAFunc.bind(this)}
/>
<SiblingB
myProp={this.state.propB}
myFunc={this.siblingBFunc.bind(this)}
/>
</div>
);
}
// Define 'siblingAFunc' and 'siblingBFunc' here
}React
6. Observer
2
PubSubJS
EventEmitter
MicroEvent.js
const event = new Event();
event.on('click', (state) => {
this.setState(state)
})
event.emit('click', {visible: true})React
7. Global Variables
2
window
global
React
8. Context
2
class Button extends React.Component {
render() {
return (
<button style={{background: this.context.color}}>
{this.props.children}
</button>
);
}
}
Button.contextTypes = {
color: React.PropTypes.string
};
React
8. Context
2
class Message extends React.Component {
render() {
return (
<div>
{this.props.text} <Button>Delete</Button>
</div>
);
}
}
React
8. Context
2
class MessageList extends React.Component {
getChildContext() {
return {color: "purple"};
}
render() {
const children = this.props.messages.map((message) =>
<Message text={message.text} />
);
return <div>{children}</div>;
}
}
MessageList.childContextTypes = {
color: React.PropTypes.string
};React
Providers
2
<Provider store={store}>
<MyRootComponent />
</Provider>
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<Route path="foo" component={Foo}/>
<Route path="bar" component={Bar}/>
</Route>
</Router>
</Provider>,React
Providers
2
@connect((store) => { e: store.a.b.c.d.name})
class Button extends Component {
render() {
return <div> Go to {this.props.name} </div>
}
}
@inject('name')
class Button extends Component {
render() {
return <div> Go to {this.props.name} </div>
}
}
React
lsk-general/General/Component
import React, { PropTypes } from 'react';
export default class Component extends React.Component {
static contextTypes = {
history: PropTypes.object,
};
redirect(...args) {
this.context.history && this.context.history.push(...args);
}
...
}
2
3
Модальные окна
react-bootstrap & React Context
4
Chrome Developer Tools
& React Developer Tools
React Developer Tools
4
Игорь Суворов
Thanks!
any questions?
программист-предприниматель
Умные Компоненты
By Igor Suvorov
Умные Компоненты
* template
