ReactJS组件API

作者：--    发布时间：2019-11-20

在本章中，我们将学习react组件api。这里将讨论三个方法：setstate()，forceupdate和reactdom.finddomnode()。 在新的es6类中，必须手动绑定这个。在示例中使用this.method.bind(this)。

设置状态

setstate()方法用于更新组件的状态。 这种方法不会替代状态，而只是添加对原始状态的更改。

文件：app.jsx -

import react from 'react';

class app extends react.component {
   constructor() {
      super();

      this.state = {
         data: []
      }

      this.setstatehandler = this.setstatehandler.bind(this);
   };
   setstatehandler() {
      var item = "setstate..."
      var myarray = this.state.data.slice();
      myarray.push(item);
      this.setstate({data: myarray})
   };
   render() {
      return (
         <div>
            <button onclick = {this.setstatehandler}>set state</button>
            <h4>state array: {this.state.data}</h4>
         </div>
      );
   }
}
export default app;

我们从一个空的数组开始。每次点击按钮，状态将被更新。 如果点击五次，将得到以下输出。

强制更新

有时可能想要手动更新组件。这可以使用forceupdate()方法来实现。

文件：app.jsx -

import react from 'react';

class app extends react.component {
   constructor() {
      super();
      this.forceupdatehandler = this.forceupdatehandler.bind(this);
   };
   forceupdatehandler() {
      this.forceupdate();
   };
   render() {
      return (
         <div>
            <button onclick = {this.forceupdatehandler}>force update</button>
            <h4>random number: {math.random()}</h4>
         </div>
      );
   }
}
export default app;

这个示例中，实现设置一个随机数字，每次单击按钮时都会更新。

查找dom节点

对于dom操作，可以使用reactdom.finddomnode()方法。 首先，需要导入react-dom。

文件：app.jsx -

import react from 'react';
import reactdom from 'react-dom';

class app extends react.component {
   constructor() {
      super();
      this.finddomnodehandler = this.finddomnodehandler.bind(this);
   };
   finddomnodehandler() {
      var mydiv = document.getelementbyid('mydiv');
      reactdom.finddomnode(mydiv).style.color = 'red';
   }
   render() {
      return (
         <div>
            <button onclick = {this.finddomnodehandler}>find dome node</button>
            <div id = "mydiv">这是mydiv的内容</div>
         </div>
      );
   }
}
export default app;

当点击按钮，mydiv元素的颜色变成红色。如下所示 -

注 - 自0.14更新以来，大多数旧的组件api方法都被弃用或删除以适应es6。