开发手册 欢迎您!
软件开发者资料库

ReactJS - 组件API

ReactJS组件API - 从简单和简单的步骤学习ReactJS,从基本概念到高级概念,包括概述,环境设置,JSX,组件,状态,道具概述,道具验证,组件API,组件生命周期,表格,事件,参考,键,路由器,磁通概念,使用磁通,动画,服务器端渲染,高阶组件,最佳实践。

在本章中,我们将解释React组件API.我们将讨论三种方法: setState(),forceUpdate ReactDOM.findDOMNode().在新的ES6类中,我们必须手动绑定它.我们将在示例中使用 this.method.bind(this).

设置状态

setState ()方法用于更新组件的状态.此方法不会替换状态,只会将更改添加到原始状态.

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 (         
            SET STATE            

State Array: {this.state.data}

         
      );   }}export default App;

我们从一个空数组开始.每次我们点击按钮,状态都会更新.如果我们点击五次,我们将获得以下输出.

React组件API设置状态

强制更新

有时我们可能希望手动更新组件.这可以使用 forceUpdate()方法来实现.

import React from 'react';class App extends React.Component {   constructor() {      super();      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);   };   forceUpdateHandler() {      this.forceUpdate();   };   render() {      return (         
            FORCE UPDATE            

Random number: {Math.random()}

         
      );   }}export default App;

我们设置的是一个随机数,每次点击按钮都会更新.

React Component API Force Update

Find Dom Node

对于DOM操作,我们可以使用 ReactDOM.findDOMNode()方法.首先我们需要导入 react-dom .

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 = 'green';   }   render() {      return (         
            FIND DOME NODE            NODE
         
      );   }}export default App;

点击按钮后, myDiv 元素的颜色会变为绿色.

React Component API Find Dom Node

注意 : 自0.14更新以来,不推荐使用或删除大多数旧组件API方法以适应ES6.