React 组件API，常用的有以下七个方法：setState、replaceState、setProps、replaceProps、forceUpdate、findDOMNode和isMounted。
1.React组件API React组件API主要有以下7个方法: - 设置状态：setState - 替换状态：replaceState - 设置属性：setProps - 替换属性：replaceProps - 强制更新：forceUpdate - 获取DOM节点：findDOMNode - 判断组件挂载状态：isMounted
1)setState/replaceState 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class Counter extends React.Component{
constructor(props) {
super(props);
this.state = {clickCount: 0};
}
//此时，无论你点击多少次，state的值发生的变化，但是页面不会重新渲染。
/*
shouldComponentUpdate(){
return false
}*/
handleClick() {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
});
}
render () {
return (<button onClick={this.handleClick.bind(this)}>点我！点击次数为: {this.state.clickCount}</button>);
}
}
ReactDOM.render(
<Counter/>,
document.getElementById('app')
);
</script>
</body>
</html>
2)setProps/replaceProps setProps设置组件属性，并重新渲染组件。replaceProps()方法与setProps类似，但它会删除原有 props。 ==注意：React13.3以上的版本，setProps()和replaceProps不再有效。React建议只重新渲染顶级组件，如果新渲染具有相同的组件类型，则基本上只更新道具。==
3)forceUpdate component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新。
默认情况下，当组件的state或props发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。
通常你应该避免使用 forceUpdate()，尽量在render()中使用 this.props和this.state。通常来说, 我们应该用 setState() 更新数据,从而驱动更新.所以用到 component.forceUpdate() 的情况并不多
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class App extends React.Component{
constructor() {
super();
this.name = '------>我是默认值';
this.state = {
count: 0,
};
}
handelforceUpdate = (name) => {
this.name = name;
this.forceUpdate();
}
handelSetState = () => {
const { count } = this.state;
this.setState({
count: count + 1,
});
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true;
}
render(){
const {count} = this.state;
console.log('this.name:', this.name, 'count:', count);
return (
<div>
<button onClick={() => this.handelforceUpdate('---->我是forceUpdate方法')}>点击使用forceUpdate</button>
<button onClick={this.handelSetState}>点击使用setState</button>
<div>handelforceUpdate{this.name}</div>
<div>handelSetState:{count}</div>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);
</script>
</body>
</html>
4)findDOMNode
获取DOM节点。大多数情况下，你可以绑定一个 ref 到 DOM 节点上，可以完全避免使用 findDOMNode。 从 React16开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>
<!--React.PropTypes 在 React v15.5 版本后已经移到了prop-types 库。-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
class IndexComNode extends React.Component {
render() {
return (
<div>{'IndexComNode'}</div>
)
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
increment: 123
}
}
clickEvent() {
let node = ReactDOM.findDOMNode(this.refs.IndexComNode)
console.log(node)
}
render() {
return (
<div>
<button onClick={this.clickEvent.bind(this)}>单击就是了</button>
<IndexComNode ref="IndexComNode"/>
</div>
)
}
}
ReactDOM.render(
<Index/>,
document.getElementById('app')
);
</script>
</body>
</html>
5)isMounted isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。