02 react简单组件

react简单组件

本案例中的组件均被拉出成为单独的文件

项目路径如下

组件的写法

注意:

1. 组件名一定要大写
2. 组件必须有 return 内容 或者return null

// ./components/com.js

import React from "react";

// 函数组件
export function Hello() {
  return <h1>这是我的一个函数组件</h1>;
}

// 组件不返回 内容 必须返回一个null
export function RetNo() {
  return null;
}

// 类组件
export class HelloRceat extends React.Component {
  render() {
    return <h1>class 组件</h1>;
  }
}

组件的使用

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import { HelloRceat, RetNo, Hello } from "./components/com.js";


const div = (
  <div>
   <HelloRceat />
        <hr>
   <RetNo />
        <hr>
   <Hello />
  </div>
);
ReactDOM.render(div, document.querySelector("#root"));

事件处理

我呢只举一个例子

// ./components/event.js


import React from "react";
// 类组件
export class Events1 extends React.Component {
  handleClick(e) {
    console.log("点击我干嘛", e);
  }
  render() {
    return <button onClick={this.handleClick}>点击</button>;
  }
}

// 函数组件
export function Events2() {
  function handleClick(e) {
    console.log("点击我干嘛", e);
  }
  return <button onClick={handleClick}>点击</button>;
}

export function Events3() {
  function handleClick(e) {
    console.log("点击我干嘛", e);
    // 阻止默认行为
    e.preventDefault();

  }
  return <a href="http://www.baidu.com" onClick={handleClick}>点击</a>;
}

页面使用

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import { Events1, Events2, Events3 } from "./components/event.js";


const div = (
  <div>
   <Events1 />
        <hr>
   <Events2 />
            <hr>
   <Events3 />
  </div>
);
ReactDOM.render(div, document.querySelector("#root"));

更新视图

注意:

1. 只有类组件可以实现更新视图(函数组件不可以)
2. 这之间有一个this的指向问题大家要注意

// ./components/state.js

export class StateClass extends React.Component {
  // 第一种初始data
  constructor() {
    super(); // 必须写
    this.state = {
      count: 0,
    };
    // this.handerFunc = this.handerFunc.bind(this);
  }

  // 第二种初始 data (二者取其一)
  // state = {
  //   count: 0,
  // };

  // handerFunc() { // 有this的指向问题
  //   // this.state.count++;
  //   this.setState({ count: this.state.count + 1 });
  // }
  handerFunc = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <h2>{this.state.count}</h2>
        {/* <button onClick={() => this.setState({ count: this.state.count + 1 })}> */}
        <button onClick={this.handerFunc}>点击count++</button>
      </div>
    );
  }
}

页面使用

// ./index.js

import React from "react";
import ReactDOM from "react-dom";
import { StateClass } from "./components/state";


const div = (
  <div>
   <StateClass />
        <hr>
  </div>
);
ReactDOM.render(div, document.querySelector("#root"));