React:架构理解

单个Class

//如果执行不了，把注释删掉即可。
//首先定义Clock组件
class Clock extends React.Component {
//结构体 props是参数
  constructor(props) {
    super(props);//super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
    this.state = {date: new Date()};//this 方法来指定具体状态
  }
  //构建组件
  componentDidMount() { 
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  //销毁组件，使用完组件后记得销毁，不然会造成资源空间浪费
 componentWillUnmount() { 
   clearInterval(this.timerID);
 }
  //tick方法设置具体日期
  tick() {
    this.setState({
      date: new Date()
    });
  }
  //前面已经定义过状态了，通过状态state去渲染 UI，UI的整体架构设计是DOM实现，具体实现是state 渲染的。
  //以下是返回的html
  render() {
return(
    //如果 hello的 greeting-left-left写成greeting-left，蓝色的部分会分成左右两部分，hello在左边，猫图片在右边
    <div className="greeting">
      <div className="greeting-left">
         <img 
         src="http://placekitten.com/g/64/64" />
         <div className="greeting-left-left">hello</div> 
         <p>{this.state.date.toLocaleString()}</p>
      </div>  
      <div className="greeting-right">
        <p>hi</p>
      </div>
    </div>);
  }
}
//显示渲染的 UI
ReactDOM.render( <Clock />,document.getElementById('root'));

CSS部分

body{background: #a3d5d0;}
.greeting{width:400px;
  height:200px;
  font-size:15px;
  border:1px solid red;}
.greeting-left{width:49%;
  height:100%;
  border:1px solid blue;
  float: left}
.greeting-right{width:49%;
  height:100%;
  border:1px solid green;
  float:left}

多个class

案例1

// 第一步续：DOM上实现具体（另类实现）
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');
//定义隐藏层 modal组件
class Modal extends React.Component {
  constructor(props) {super(props);
    this.el = document.createElement('div');}
  componentDidMount() {modalRoot.appendChild(this.el);}
  componentWillUnmount() {modalRoot.removeChild(this.el);} 
  render() {// 创建一个 portal 去渲染子类
    return ReactDOM.createPortal(
      // Any valid React child: JSX, strings, arrays, etc.
      this.props.children,
      // A DOM element
      this.el,);}}
//第二步：定义APP组件
class App extends React.Component {
  constructor(props) {super(props);
    this.state = {showModal: false};}
  //=> 方法设置状态 和this.handleShow = this.handleShow.bind(this);等价
  //设置显示处理的方法
  handleShow =()=> {this.setState({showModal: true});}
  //设置隐藏处理的方法
  handleHide =()=> {this.setState({showModal: false});}
 //通过设置的state 渲染 UI
  render() {//设置的隐藏层的html，第二步的Modal组件和这个设置相关联。
    const modal = this.state.showModal ? (
      <Modal>
        <div className="modal">
          <div>
            191909010330
          </div>
          <br/> 194106220345
          <button onClick={this.handleHide}>Hide modal</button>
        </div>
      </Modal>
    ) : null;
   /返回显示层的html
    return (<div className="app">
        3145926.<br/>
        <button onClick={this.handleShow}>Show modal</button>
        {modal}
      </div>);}}
第一步：显示UI
ReactDOM.render(<App />, appRoot);

CSS部分

body {background: #a3d5d0;}
#modal-root {position: relative;
  z-index: 999;}
.app {height: 10em;
  width: 10em;
  background: lightblue;
  overflow: hidden;}
.modal {background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;}

案例2
第二步是调用 Mouse 组件。是属于连接第一步和第二步

//定义 Mouse 组件
class Mouse extends React.Component {//结构体
  constructor(props) {
    super(props);//super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };//this方法指定状态}
  //设置状态
  handleMouseMove(event) {this.setState({
      x: event.clientX,
      y: event.clientY});}
//通过状态state渲染UI，UI整体框架设计是DOM设计，具体实现是state渲染的。 返回一个html
  render() {
    return (<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>{}
      <p>The current mouse position is ({this.state.x}, {this.state.y})</p></div>);}}
//第二步 定义MouseTracker 组件 .<Mouse/>是调用 Mouse 组件
class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse />
      </div>);}}
//第一步显示UI
ReactDOM.render(<MouseTracker />,document.getElementById('root'));

CSS 方法

body {background: #a3d5d0;}
#modal-root {position: relative;
  z-index: 999;}
.app {height: 10em;
  width: 10em;
  background: lightblue;
  overflow: hidden;}
.modal {background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;}

单个function

//定义时间函数，生成html组件
function tick() {
  const element = (<div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>);
  ReactDOM.render(element, document.getElementById('root'));//显示UI}
//它调用ReactDOM.render()每秒钟setInterval()回调
setInterval(tick, 1000);

多个function

//定义 welcome函数
function Welcome(crops){return <h1>Hello,{crops.name}</h1>;}
// 定义App 函数并调用 welcome的方法
function App(){
  return(<div>
    <Welcome name="saro"/>
    <Welcome name="l"/>
    <Welcome name="Z"/>
  </div>);}
ReactDOM.render( <App/>,document.getElementById('root'));//显示UI

class+function结合版

// 第一步续：DOM上显示UI 
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');
//第三步 定义modal组件
class Modal extends React.Component {
  constructor(props) {super(props);
    this.el = document.createElement('div');}
  componentDidMount() {modalRoot.appendChild(this.el);}
  componentWillUnmount() {modalRoot.removeChild(this.el);} 
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,);}}
//第二步：定义父类组件
class Parent extends React.Component {
  constructor(props) {super(props);
    this.state = {clicks: 0};}
  handleClick =()=> {
    this.setState(prevState => ({
      clicks: prevState.clicks + 1}));}
  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child />
        </Modal>
      </div>
    );
  }
}
//第四步：定义 child 函数
function Child() {
  return (<div className="modal">
      <button>Click</button>
    </div>);}
第一步：显示父类组件
ReactDOM.render(<Parent />, appRoot);

CSS方法

body {background: #a3d5d0;}
#modal-root {position: relative;
  z-index: 999;}
.app {height: 10em;
  width: 10em;
  background: lightblue;
  overflow: hidden;}
.modal {background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;}

其他

//定义名字和 element
const name="Hilter"
const element = <h1>Hello, {name}</h1>;
ReactDOM.render( element, document.getElementById('root'))；//显示UI

删除注释

如果程序不能执行，删除注释即可