Умные Компоненты

Занятие 4

4 Mar 2017

skill-branch.ru/backend-middle

Профессия
Node.js & React.js developer
продвинутый курс

1

Умные vs Глупые

1

Умные vs Глупые

Smart vs Dump

Stateful vs Stateless

Контейнеры vs Компоненты

Логические vs Презентационные

JS vs CSS

medium.com/@dan_abramov/smart-and-dumb-components

Холивары

1

2

React Context

React

Component communication

2

andrewhfarmer.com/component-communication

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);
  }

  ...

}

github.com/isuvorov/lsk-general