子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

组件中的 API - 类组件 ​

React 类组件 API ​

React 类组件 API。以下是常用方法 React 中的类组件主要有以下 API：

  1. constructor：构造函数，用于初始化组件的状态和绑定方法。
  2. render：渲染函数，用于生成组件的 UI 结构。
  3. state：组件的状态对象，可以通过 this.state 访问和修改。
  4. setState：用于更新组件状态的方法，接收一个对象作为参数，表示要更新的状态。
  5. forceUpdate：用于强制组件重新渲染，即使状态和属性没有发生变化。

1. 设置状态：setState ​

setState是 React 组件中用于更新组件状态的方法。它接受一个对象作为参数，该对象包含要更新的状态键值对。当状态更新后，组件会重新渲染。

sh
setState(object nextState[, function callback])

参数说明

  • nextState，将要设置的新状态，该状态会和当前的 state 合并
  • callback，可选参数，回调函数。该函数会在 setState 设置成功，且组件重新渲染后调用。

代码案例

javascript
// 案例: 1.1. React 类组件 API
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  doAdd = () => this.setState({ count: ++this.state.count });
  render = () => (
    <p>
      <button onClick={this.doAdd}>累加</button>-{this.state.count}-setState()
    </p>
  );
}
ReactDOM.render(<App />, document.getElementById("app1-1"));

2. 强制更新：forceUpdate ​

forceUpdate用于强制组件重新渲染，即使状态和属性没有发生变化。这在某些情况下可能是必要的，例如在动画或过渡效果中。

sh
forceUpdate([function callback])

参数说明

  • callback，可选参数，回调函数。该函数会在组件 render()方法调用后调用。

代码案例

javascript
// 案例: 1.2. 设置属性：setProps
class App extends React.Component {
  constructor(props) {
    super(props);
    this.count = 0;
  }
  doAdd = () => ++this.count && this.forceUpdate();
  render = () => (
    <p>
      <button onClick={this.doAdd}>累加</button>-{this.count}-forceUpdate()
    </p>
  );
}
ReactDOM.render(<App />, document.getElementById("app1-2"));

3. 获取 DOM 节点：findDOMNode ​

findDOMNode用于获取组件对应的本地浏览器 DOM 元素。如果组件已经挂载到 DOM 中，该方法返回对应的 DOM 元素；否则返回 null。

sh
DOMElement findDOMNode()

参数说明

  • 返回值：DOM 元素 DOMElement

代码案例

javascript
// 案例: 1.3. 获取 DOM 节点：findDOMNode
class App extends React.Component {
  getDOM = () =>
    (ReactDOM.findDOMNode(this).style.color = `hsl(0deg 100% ${
      Math.random() * 100
    }%)`);
  render = () => (
    <p>
      <button onClick={this.getDOM}>获取DOM元素-修改颜色</button>-{this.count}
      -ReactDOM.findDOMNode(this)
    </p>
  );
}
ReactDOM.render(<App />, document.getElementById("app1-3"));

代码与演示 ​

1. 全部代码 ​

点击查看代码
html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test-react-api-类组件</title>
    <!-- <script src="https://cdn.staticfile.org/react/18.0.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.0.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
    <script src="./react.js"></script>
    <script src="./react-dom.js"></script>
    <script src="./babel.js"></script>
  </head>

  <body>
    <div id="app1"></div>
    <div id="app2"></div>
    <div id="app3"></div>

    <script type="text/babel">
      (function () {
        // 案例: 1.1. React 类组件 API
        class App extends React.Component {
          constructor(props) {
            super(props);
            this.state = { count: 0 };
          }
          doAdd = () => this.setState({ count: ++this.state.count });
          render = () => (
            <p>
              <button onClick={this.doAdd}>累加</button>-{this.state.count}
              -setState()
            </p>
          );
        }
        ReactDOM.render(<App />, document.getElementById("app1"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 1.2. 设置属性：setProps
        class App extends React.Component {
          constructor(props) {
            super(props);
            this.count = 0;
          }
          doAdd = () => ++this.count && this.forceUpdate();
          render = () => (
            <p>
              <button onClick={this.doAdd}>累加</button>-{this.count}
              -forceUpdate()
            </p>
          );
        }
        ReactDOM.render(<App />, document.getElementById("app2"));
      })();
    </script>

    <script type="text/babel">
      (function () {
        // 案例: 1.3. 获取 DOM 节点：findDOMNode
        class App extends React.Component {
          getDOM = () =>
            (ReactDOM.findDOMNode(this).style.color = `hsl(0deg 100% ${
              Math.random() * 100
            }%)`);
          render = () => (
            <p>
              <button onClick={this.getDOM}>获取DOM元素-修改颜色</button>-
              {this.count}-ReactDOM.findDOMNode(this)
            </p>
          );
        }
        ReactDOM.render(<App />, document.getElementById("app3"));
      })();
    </script>
  </body>
</html>

2. 案例演示 ​




test-react-api-class.html 资源加载中...