React组件API用法全解 – ReactJS实战教程 react组件api|React

上一章ReactJS实战教程请查看：React构造函数constructor用法详解
ReactJS组件component是一个顶级API，它使代码在应用程序中完全独立和可重用，它包括各种方法:

创建元素
更改元素
片段Fragment

在这里，我们将解释React组件API中可用的三个最重要的方法。

setState()
forceUpdate()
findDOMNode()

setState()此方法用于更新组件的状态，此方法并不总是立即替换状态，相反，它只添加对原始状态的更改。它是用于更新用户界面(UI)以响应事件处理程序和服务器响应的主要方法。
注意：在ES6类中，this.method.bind(this)用于手动绑定setState()方法。
语法

this.stateState(object newState[, function callback]);

在上面的语法中，有一个可选的回调函数，它在setState()完成并重新呈现组件之后执行。
例子

import React, { Component } from 'react'; import PropTypes from 'prop-types'; class App extends React.Component { constructor() { super(); this.state = { msg: "Welcome to srcmini" }; this.updateSetState = this.updateSetState.bind(this); } updateSetState() { this.setState({ msg:"ReactJS实战教程" }); } render() { return ( < div> < h1>{this.state.msg}< /h1> < button onClick = {this.updateSetState}>SET STATE< /button> < /div> ); } } export default App;

main.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(< App/>, document.getElementById('app'));

forceUpdate ()该方法允许我们手动更新组件。
语法

Component.forceUpdate(callback);

例子
app.js

import React, { Component } from 'react'; class App extends React.Component { constructor() { super(); this.forceUpdateState = this.forceUpdateState.bind(this); } forceUpdateState() { this.forceUpdate(); }; render() { return ( < div> < h1>生成随机数的例子< /h1> < h3>随机数: {Math.random()}< /h3> < button onClick = {this.forceUpdateState}>ForceUpdate< /button> < /div> ); } } export default App;

findDOMNode ()【React组件API用法全解 – ReactJS实战教程】对于DOM操作，需要使用ReactDOM.findDOMNode()方法，此方法允许我们查找或访问底层DOM节点。
语法

ReactDOM.findDOMNode(component);

例子
对于DOM操作，首先需要导入这一行：从你的App.js文件中的’ react-dom’ 导入ReactDOM。
app.js

import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component { constructor() { super(); this.findDomNodeHandler1 = this.findDomNodeHandler1.bind(this); this.findDomNodeHandler2 = this.findDomNodeHandler2.bind(this); }; findDomNodeHandler1() { var myDiv = document.getElementById('myDivOne'); ReactDOM.findDOMNode(myDivOne).style.color = 'red'; } findDomNodeHandler2() { var myDiv = document.getElementById('myDivTwo'); ReactDOM.findDOMNode(myDivTwo).style.color = 'blue'; } render() { return ( < div> < h1>ReactJS查找DOM节点例子< /h1> < button onClick = {this.findDomNodeHandler1}>FIND_DOM_NODE1< /button> < button onClick = {this.findDomNodeHandler2}>FIND_DOM_NODE2< /button> < h3 id = "myDivOne">JTP-NODE1< /h3> < h3 id = "myDivTwo">JTP-NODE2< /h3> < /div> ); } } export default App;