// const name = 'jack'
// const h1 = <div>{name}</div>
// const h1 = <div>{19}</div>
// const h1 = <div>{true + ''}</div>
// const h1 = <div>{1 + 3 + 7 + 9}</div>
// const h1 = <div>{['red', 'yellogreen', 'pink']}</div>
// const h1 = <div>{['red', 'yellogreen', 'pink'].join('')}</div>
// const h1 = <div>{Math.random() > 0.5 ? '大于' : '小于等于'}</div>

<p style={{ color: "red", fontSize: "50px" }}>绑定样式</p>

import React from "react";

class Refcom extends React.Component {
  constructor() {
    super();
    // 通过 React.createRef 创建 ref 对象
    this.txt = React.createRef();
  }

  fn = () => {
    // 输出 ref 对象
    console.log(this.txt);
  };
  render() {
    return (
      <React.Fragment>
        <div style={{ background: "pink", marginBottom: "20px" }}>
          <h1>ref 获取 node</h1>
          <input
            type="text"
            /* 绑定 ref  */
            ref={this.txt}
            /* 点击输出 ref 对象 */
            onClick={this.fn}
            placeholder="点击我"
          />
        </div>
      </React.Fragment>
    );
  }
}

export default Refcom;

function App() {
  let divInput = useRef();
  // class 组件使用 createRef() 创建
  const getDivRef = () => {
    console.log(divInput);
  };
  return (
    <div ref={divInput}>
      <button onClick={getDivRef}>点击获取 ref</button>
    </div>
  );
}

import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  return (
    <div>
      <button>我是 Father </button>
      <Son></Son>
    </div>
  );
};
const Son = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
};

export default ForwardRef;

import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  let inputRef = useRef();
  return (
    <div>
      <button>我是 Father </button>
      {/* 报错:Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? */}
      <Son ref={inputRef}></Son>
    </div>
  );
};
const Son = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
};

export default ForwardRef;

import React, { forwardRef, useRef } from "react";
const ForwardRef = () => {
  return (
    <div>
      <Father></Father>
    </div>
  );
};
const Father = () => {
  let inputRef = useRef();
  const changeInputValue = () => {
    inputRef.current.value = "Hello";
  };
  return (
    <div>
      <button onClick={changeInputValue}>我是 Father </button>
      <Son ref={inputRef}></Son>
    </div>
  );
};
const Son = forwardRef((props, ref) => {
  // let inputRef = useRef();
  const changeInputValue = () => {
    ref.current.value = "Hello";
  };
  return (
    <div>
      <input type="text" ref={ref} />
      <button onClick={changeInputValue}>我是 Son </button>
    </div>
  );
});

export default ForwardRef;

import React from "react";

export default function Function() {
  return <div>这是函数组件</div>;
}

import React, { Component } from "react";

export default class Class extends Component {
  render() {
    return <div>这是类组件</div>;
  }
}

import React, { Component } from "react";

export default class State extends Component {
  state = {
    msg: "你好",
  };
  render() {
    return (
      <div>
        <div>{this.state.msg}</div>
        <button
          onClick={() =>
            // 状态是自己内部的,改变状态唯一的方式就是`setState`
            this.setState({
              msg: "我被更新了",
            })
          }
        >
          点我更新数据
        </button>
      </div>
    );
  }
}

import React, { Component } from "react";
// 实现累加点击按钮数字加2
export default class AsyncState extends Component {
  state = {
    conut: 0,
  };
  update = () => {
    this.setState({
      conut: this.state.conut + 1,
    });
    this.setState({
      conut: this.state.conut + 1,
    });
    console.log("AsyncState.jsx   conut 的值是--", this.state.conut);
  };
  update2 = () => {
    this.setState((state) => {
      return {
        conut: state.conut + 1,
      };
    });
    this.setState((state) => {
      return {
        conut: state.conut + 1,
      };
    });
    console.log("AsyncState.jsx   conut 的值是--", this.state.conut);
  };
  render() {
    return (
      <div>
        <h1>{this.state.conut}</h1>
        <span>请看控制器</span>
        <button onClick={this.update}>点我累加</button>
        <button onClick={this.update2}>点我累加2</button>
      </div>
    );
  }
}

import React, { Component } from "react";

export default class HandlingEvents extends Component {
  state = {
    msg: "1",
  };
  test = (e) => {
    e.preventDefault();
    console.log(e);
  };
  render() {
    return (
      <div>
        <h1>事件处理</h1>
        <a href="//www.baidu.com" onClick={(e) => this.test(e)}>
          阻止默认行为
        </a>
        <button onClick={(e) => this.test(e)}>点击</button>
      </div>
    );
  }
}

import React, { Component } from "react";

export default class HandlingEvents extends Component {
  state = {
    msg: "1",
  };
  test = (e) => {
    e.preventDefault();
    console.log(e);
  };
  render() {
    return (
      <div>
        <h1>事件处理</h1>
        <a href="//www.baidu.com" onClick={(e) => this.test(e)}>
          阻止默认行为
        </a>
        <button onClick={(e) => this.test(e)}>箭头函数点击</button>
        <button onClick={this.test}>普通调用函数点击</button>
        <button onClick={this.test.bind(this)}>bind点击</button>
      </div>
    );
  }

import React from "react";
import "./index.css";
import { Soncom, Soncom2 } from "../Soncom/index";
class Fathercom extends React.Component {
  state = {
    name: "刘德华",
  };
  render() {
    return (
      <div className="father">
        <h1>父子传参</h1>
        {/* class 子组件 */}
        <Soncom cname={this.state.name}></Soncom>
        {/* function 子组件 */}
        <Soncom2 cname="张学友"></Soncom2>
      </div>
    );
  }
}

export default Fathercom;

import React from "react";
import "./index.css";
export class Soncom extends React.Component {
  // 设置 class 子组件的参数的默认值
  static defaultProps = {
    age: 90,
  };
  render() {
    return (
      <div className="son">
        <h1>子组件</h1>
        <div>class 子组件传参</div>
        <span>
          传递的参数-----{this.props.cname}年龄{this.props.age}
        </span>
      </div>
    );
  }
}

export const Soncom2 = (props) => {
  const fn = () => {
    console.dir(Soncom2);
  };

  return (
    <div className="son2">
      <h1>子组件</h1>
      <div>function 子组件传参</div>
      <span>
        传递的参数----{props.cname}年龄{props.age}
      </span>
      <button onClick={fn}>测试</button>
    </div>
  );
};
// 设置 function 子组件的参数的默认值
Soncom2.defaultProps = {
  age: 10,
};
// export default Soncom

import React from "react";
import "./index.css";
import { Soncom } from "../Soncom/index";
class Fathercom extends React.Component {
  state = {
    name: "刘德华",
  };

  Fatherfn(age) {
    console.log(age);
  }

  render() {
    return (
      <div className="father">
        {/* class 子组件 */}
        <Soncom cname={this.state.name} Fatherfn={this.Fatherfn}></Soncom>
      </div>
    );
  }
}

export default Fathercom;

import React from "react";
import "./index.css";
export class Soncom extends React.Component {
  // 设置 class 子组件的参数的默认值
  static defaultProps = {
    age: 90,
  };
  Sonfn = () => {
    this.props.Fatherfn("son子里面的" + this.props.age);
  };
  render() {
    return (
      <div className="son">
        <h1>子组件</h1>
        <div>class 子组件传参</div>
        <span>
          传递的参数-----{this.props.cname}年龄{this.props.age}
        </span>
        <button onClick={this.Sonfn}>子父传参</button>
      </div>
    );
  }
}
// export default Soncom

class Person {
  static propTypes = {
    son: propTypes.string,
  };
}

import React, { Component } from "react";

let ContextMsg = React.createContext("你好");
export default class Context extends Component {
  render() {
    return (
      <ContextMsg.Consumer>
        {(value) => (
          <div>
            <h1>{value}</h1>
            <Son msg={value}></Son>
          </div>
        )}
      </ContextMsg.Consumer>
    );
  }
}

function Son(props) {
  return (
    <div>
      <h1>子组件</h1>
      <span>{props.msg}</span>
    </div>
  );
}

import React, { Component } from "react";

export default class ShouldComponentUpdate extends Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  // 返回 false 会阻止 组件更新
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.count < 2) {
      return false;
    } else {
      return true;
    }
  }
  componentDidUpdate() {
    console.log("ShouldComponentUpdate.jsx 组件更新了");
  }
  render() {
    return (
      <div>
        <h1>ShouldComponentUpdate</h1>
        <div>
          <span>{this.state.count}</span>
          <button onClick={this.add}>点击更新</button>
        </div>
      </div>
    );
  }
}

import React, { Component } from "react";
import Mouse from "../Mouse";

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 写法一 */}
        <Mouse
          wdnmd={(mouse) => (
            <div>
              {mouse.x}---{mouse.y}
            </div>
          )}
        ></Mouse>
        {/* 写法二 */}
        {/* <Mouse>
          {(mouse)=>(<div>{mouse.x}---{mouse.y}</div>)}
        </Mouse> */}
      </div>
    );
  }
}

import React from "react";

class Mouse extends React.Component {
  // 需求: 完成坐标显示

  state = {
    x: 0,
    y: 0,
  };

  componentDidMount() {
    window.addEventListener("mousemove", this.fn);
  }

  fn = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY,
    });
  };

  render() {
    // 写法一
    return this.props.wdnmd(this.state);
    // 写法二
    // return this.props.children(this.state)
  }
}

export default Mouse;

import React from "react";
const WidthMouse = (Params) => {
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };

    componentDidMount() {
      window.addEventListener("mousemove", this.fn);
    }

    fn = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    };

    render() {
      // return <Params x={this.state.x} y={this.state.y}></Params>
      return <Params {...this.state}></Params>;
    }
  }
  // Mouse.displayName=Params.name
  // console.dir(Mouse);
  return Mouse;
};

export default WidthMouse;

// 创建一个组件(函数组件)
const Position = (props) => {
  return (
    <div>
      <p>
        {props.x}--{props.y}
      </p>
    </div>
  );
};
/* 包装一下 */
let a = WidthMouse(Position);

const withMouse = (WrappedComponent) => {
  class Mouse extends React.Component {
    ...
  }

  // 给高阶组件设置名称，将来在 react-dev-tools 工具中，能够区分到底是哪一个高阶组件包装的组件
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
  }
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

  return Mouse
}

...
class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0,
    };

    componentDidMount() {
      window.addEventListener("mousemove", this.fn);
    }

    fn = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY,
      });
    };

    render() {
        // 多写上一句 ...this.props
      return <Params {...this.state} {...this.props}></Params>;
    }
  }

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    // 多次调用 setState 只会执行一次渲染
    this.setState({
      count: 1,
    });
    this.setState({
      count: 2,
    });
    this.setState({
      count: 3,
    });
  };
  render() {
    console.log("渲染");
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    this.setState((newstate, newprops) => {
      // newstate.count++
      return {
        count: newstate.count + 1,
      };
    });
  };
  render() {
    console.log("渲染", this.state.count);
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class Father extends React.Component {
  state = {
    count: 0,
  };

  fn = () => {
    this.setState(
      (newstate, newprops) => {
        // newstate.count++
        return {
          count: newstate.count + 1,
        };
      },
      () => {
        console.log("setState 执行后立即执行");
      },
    );
    console.log("我比 setState 打印得还要快呢");
  };
  render() {
    console.log("渲染", this.state.count);
    return (
      <div id="Father">
        <h1>Father</h1>
        <span>{this.state.count}</span>
        <button onClick={this.fn}>点击Father按钮 ++</button>
      </div>
    );
  }
}

import React, { PureComponent } from "react";

class ClassPure extends PureComponent {
  state = {
    msg: "hello 纯组件",
  };
  render() {
    return (
      <div>
        {this.state.msg}
        <span>测试</span>
      </div>
    );
  }
}

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Portal extends Component {
  render() {
    const Portal = <div>Portal</div>;
    // 将标签渲染到 html 里面的指定元素内
    return ReactDOM.createPortal(Portal, document.getElementById("app"));
  }
}

class Index extends Component {
  render() {
    return <React.Fragment>Fragment</React.Fragment>;
  }
}

class Index extends Component {
  render() {
    return (
      <React.StrictMode>
        <div>严格模式</div>
      </React.StrictMode>
    );
  }
}

import React, { Component } from "react";
import ModuleStyle from "./index.module.css";

class Index extends Component {
  render() {
    return (
      <div>
        <h1 className={ModuleStyle.hello}>
          <span>css 模块化</span>
        </h1>
      </div>
    );
  }
}

export default Index;

import React from "react";
import styled from "styled-components";
// 创建一个 div组件里面的样式是
const Div = styled.div`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  background-color: green;
  opacity: ${(props) => props.opacity};
  transition: all 3s;
`;
class App extends React.Component {
  // div的初始状态
  state = {
    width: "0px",
    height: "0px",
    opacity: 0,
  };

  // div的改变后的状态
  btnClick = () => {
    this.setState({
      width: "60px",
      height: "60px",
      opacity: 1,
    });
  };

  render() {
    return (
      <div className="one">
        <Div {...this.state}></Div>
        <button onClick={this.btnClick}>按钮</button>
      </div>
    );
  }
}

export default App;

const Div = styled.div`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  background-color: green;
  opacity: ${(props) => props.opacity};
  transition: all 3s;
`;

// 继承样式
const Button = styled(Div)`
  background-color: skyblue;
`;

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
import "./index.css";
// CSSTransition有三个状态：
// + appear: 初始
//   + enter : 进入
//     + exit；: 退出
// 当组件第一次加载时候会自动查找
//   - appear / -appear - active / -appear - done
// 当组件显示时会自动查找
//   - enter / -enter - active / -enter - done
// 当组件退出时会自动查找
//   - exit / -exit - active / -exit - done
export default class index extends Component {
  state = {
    isShow: false,
  };
  fn = () => {
    this.setState({
      isShow: !this.state.isShow,
    });
  };
  render() {
    return (
      <React.Fragment>
        <div id="two">
          <CSSTransition
            in={this.state.isShow}
            classNames="box"
            timeout={3000}
            // 动画加载的时候才显示 dom 元素
            unmountOnExit
          >
            <div></div>
          </CSSTransition>
          <button onClick={this.fn}>点击显示动画</button>
        </div>
      </React.Fragment>
    );
  }
}

// 使用SwitchTransition的过程
// 1.导入SwitchTransition
// 2.使用SwitchTransition包裹CSSTransition
// 3.注意: 以前在CSSTransition中用的属性in 现在用的key
// 4.写变化的样式 出来 进去  类名的前缀classNames
// 5.timeout 时间

class App extends React.Component {
  render() {
    <SwitchTransition>
      <CSSTransition key={this.state.flag} classNames="box" timeout={1000}>
        <button onClick={this.btnClick}>
          {this.state.flag ? "Hello,World" : "GoodBye,World"}
        </button>
      </CSSTransition>
    </SwitchTransition>;
  }
}

import React from "react";
import { Switch, Route } from "react-router";

function renderRoutes(routes, extraProps = {}, switchProps = {}) {
  return routes  (
    <Switch {...switchProps}>
      {routes.map((route, i) => (
        <Route
          key={route.key || i}
          path={route.path}
          exact={route.exact}
          strict={route.strict}
          render={props =>
            route.render ? (
              route.render({ ...props, ...extraProps, route: route })
            ) : (
              <route.component {...props} {...extraProps} route={route} />
            )
          }
        />
      ))}
    </Switch>
  ) : null;
}

export default renderRoutes;

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
//上述两种方式是等价的

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

class LoggingButton extends React.Component {
  handleClick() {
    console.log("this is:", this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}
// 此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。