Slide 8
Slide 8 text
Stateless Components
function Avatar(props) {
return (
);
}
{props.name}
);
}
function Modal({title, children}) {
return (
{title}
{children}Slide 12
Slide 12 text
Stateless Components
// PropTypes
function Avatar({name, id) {
return (
{name}
);
}
Avatar.defaultProps = {name: ‘default’, id: 999};
Avatar.propTypes = {
name: React.PropTypes.string.isRequired,
id: React.PropTypes.number.isRequired
};
Slide 13
Slide 13 text
Stateless Components
// Context
function Avatar({name, id, context) {
const {staticHost} = context;
return (
{name}
);
}
Avatar.contextTypes = {
staticHost: React.PropTypes.string
};
Slide 14
Slide 14 text
Stateless Components
// Module pattern
function Avatar({name, id) {
return {
render() {
return (
{name}
);
},
shouldComponentUpdate(nextProps) {
return this.props.name !== nextProps.name;
}
};
}
Sorry, I’ve misunderstood…
This is not treated as Stateless Components