Resumo dos pontos de conhecimento do React
Render Props
O objetivo de Render Props é alcançar a reutilização do estado do componente. Passe uma função para o componente A por meio de adereços, que retorna um componente B, para que o componente B possa ser renderizado no componente A (usando o estado no componente A).
1. Uso de Render Props
class Cat extends React.Component {
render() {
const mouse = this.props.mouse;
return (
<img src="/cat.jpg" style={
{
position: 'absolute', left: mouse.x, top: mouse.y }} />
);
}
}
class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = {
x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
render() {
return (
<div style={
{
height: '100vh' }} onMouseMove={
this.handleMouseMove}>
{
/*
Instead of providing a static representation of what <Mouse> renders,
use the `render` prop to dynamically determine what to render.
*/}
{
this.props.render(this.state)}
</div>
);
}
}
class MouseTracker extends React.Component {
render() {
return (
<div>
<h1>移动鼠标!</h1>
<Mouse render={
mouse => (
<Cat mouse={
mouse} />
)}/>
</div>
);
}
}
Em segundo lugar, a essência do JSX
JSXÉ React.createElement()açúcar sintático, Babel irá JSX traduzido em uma React.createElement()chamada de função, será compilado em código JSX JS.