render() {
return (
<>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</>
);
}
render() {
return (
<div>
Some text.
<h2>A heading</h2>
More text.
<h2>Another heading</h2>
Even more text.
</div>
);
}
render() {
return [
'Some text',
<h2 key="someKey">A heading</h2>,
'More text.',
<h2 key="anotherKey">Another heading</h2>,
'Even more text.',
];
}
// App.js
export const ThemeContext = React.createContext('light');
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
// Toolbar.js
<div>
<ThemedButton />
</div>
// ThemedButton.js
<ThemeContext.Consumer>
{theme => <Button {...props} theme={theme} />}
</ThemeContext.Consumer>
static getDerivedStateFromProps(nextProps, prevState)
getSnapshotBeforeUpdate(prevProps, prevState)
componentWillMount
componentWillReceiveProps
componentWillUpdate
componentDidUpdate
class ExampleComponent extends React.Component {
state = {
color: colors[this.props.palette][0]
};
componentWillReceiveProps(nextProps) {
if (this.props.palette !== nextProps.palette) {
this.setState({ color: colors[nextProps.palette][0] });
}
}
}
class ExampleComponent extends React.Component {
state = {
color: colors[this.props.palette][0],
lastPalette: null,
};
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.palette !== prevState.lastPalette) {
return {
color: colors[nextProps.palette][0],
lastPalette: nextProps.palette,
};
}
return null;
}
class ConnectionsScreen extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (this.props.currency !== prevProps.currency) {
this.getConnections();
}
}
}
class ConnectionsScreen extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.currency !== this.props.currency) {
this.getConnections();
}
}
}
<input ref="inputRef" />
this.setInputRef = element => {
this.inputRef = element;
};
...
<input ref={this.setInputRef} />
this.inputRef = React.createRef();
...
<input ref={this.inputRef} />
const FancyButton = props => (
<button ref={props.ref} className="FancyButton">
{props.children}
</button>
);
const ref = React.createRef();
<FancyButton ref={ref}>
Click me!
</FancyButton>;
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>
Click me!
</FancyButton>;
Questions?