React知识点总结（三）

React知识点总结

Render Props

Render Props目的是达到组件的状态复用，通过props传一个函数给组件A，该函数返回一个组件B，这样在组件A里面就可以渲染组件B了（使用的是组件A中的state）。

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

二、JSX的本质

JSX是React.createElement()的语法糖，Babel 会把 JSX 转译成 React.createElement() 函数调用，将JSX编译成JS代码。