我有一个外部(组件)，可观察对象，我想监听的变化。当对象更新时，它会发出更改事件，然后我希望在检测到任何更改时重新呈现组件。
使用顶级React。渲染这是可能的，但在组件中它不起作用(这是有意义的，因为渲染方法只返回一个对象)。
下面是一个代码示例:
export default class MyComponent extends React.Component {
handleButtonClick() {
this.render();
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick.bind(this)}>
Click me
</button>
</div>
)
}
}
在内部单击按钮会调用this.render()，但这并不是真正导致呈现发生的原因(您可以在操作中看到这一点，因为由{Math.random()}创建的文本没有改变)。但是，如果我简单地调用this.setState()而不是this.render()，它就可以正常工作。
所以我想我的问题是:React组件需要有状态才能渲染吗?是否有一种方法可以在不改变状态的情况下强制组件按需更新?
使用useEffect作为componentDidMount, componentDidUpdate和componentWillUnmount的组合，如React文档中所述。
要像componentDidMount一样工作，你需要像这样设置你的useEffect:
useEffect(() => console.log('mounted'), []);
第一个参数是一个回调，它将根据第二个参数(一个值数组)触发。如果第二个参数中的任何值发生了变化，您在useEffect中定义的回调函数将被触发。
然而，在我所展示的示例中，我传递了一个空数组作为第二个参数，这将永远不会被更改，因此回调函数将在组件挂载时调用一次。
这是对useEffect的总结。如果不是空值，而是有一个参数，比如:
useEffect(() => {
}, [props.lang]);
这意味着每次道具。Lang改变，你的回调函数将被调用。useEffect实际上不会重新渲染你的组件，除非你在回调函数中管理一些状态，这些状态可能会触发重新渲染。
如果你想要触发一个重新渲染，你的渲染函数需要在你的useEffect中更新一个状态。
例如，在这里，渲染函数开始显示英语作为默认语言，在我的使用效果中，我在3秒后改变了语言，所以渲染被重新渲染并开始显示“西班牙语”。
function App() {
const [lang, setLang] = useState("english");
useEffect(() => {
setTimeout(() => {
setLang("spanish");
}, 3000);
}, []);
return (
<div className="App">
<h1>Lang:</h1>
<p>{lang}</p>
</div>
);
}
实际上，forceUpdate()是唯一正确的解决方案，因为如果在shouldComponentUpdate()中实现了额外的逻辑，或者当它只是返回false时，setState()可能不会触发重新呈现。
强制更新（）
调用forceUpdate()将导致在组件上调用render()，跳过shouldComponentUpdate()。更多…
设置状态()
setState()总是会触发重新呈现，除非在shouldComponentUpdate()中实现了条件呈现逻辑。更多…
forceUpdate()可以通过this.forceUpdate()从组件中调用
钩子:如何在React中使用钩子强制组件重新渲染?
顺便说一句:你是在改变状态还是你的嵌套属性不传播?
如何在React中更新嵌套的状态属性
沙盒
应该避免使用forceUpdate，因为它偏离了React的思维模式。React文档引用了一个何时使用forceUpdate的例子:
默认情况下，当组件的状态或道具改变时，组件将重新呈现。然而，如果这些隐式变化(例如:对象内部的深层数据变化而不改变对象本身)，或者如果你的render()方法依赖于一些其他数据，你可以通过调用forceUpdate()告诉React它需要重新运行render()。
然而，我想提出这样的观点:即使对于嵌套很深的对象，forceUpdate也是不必要的。通过使用不可变数据源跟踪更改变得便宜;更改总是会产生一个新对象，因此我们只需要检查对对象的引用是否已更改。你可以使用Immutable JS库将不可变数据对象实现到你的应用程序中。
通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使得你的组件“纯粹”，你的应用程序更简单、更高效。
改变你想要重新渲染的元素的键也可以。通过state在元素上设置键道具，然后当你想更新Set state时有一个新的键。
<Element key={this.state.key} />
然后发生了变化，您重置了密钥
this.setState({ key: Math.random() });
我要注意的是，这将取代键改变的元素。这可能有用的一个例子是，当您有一个文件输入字段，您希望在图像上传后重置。
虽然OP问题的真正答案是forceUpdate()，但我发现这个解决方案在不同的情况下都很有用。我还想指出的是，如果你发现自己使用了forceUpdate，你可能需要检查你的代码，看看是否有另一种方法来做事情。
注意1-9-2019:
以上(改变键)将完全替换元素。如果您发现自己正在更新键来进行更改，那么您的代码中的其他地方可能存在问题。在key中使用Math.random()将在每次渲染时重新创建元素。我不建议像这样更新键，因为react使用键来确定重新渲染事物的最佳方式。
我们可以如下所示使用this.forceUpdate()。
class MyComponent extends React.Component {
handleButtonClick = ()=>{
this.forceUpdate();
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick}>
Click me
</button>
</div>
)
}
}
ReactDOM.render(<MyComponent /> , mountNode);
元素的数学。即使你使用setState重新渲染组件，DOM中的random'部分也只会被更新。
这里所有的答案都是正确的，补充了理解..的问题，因为我们知道重新呈现一个组件不使用setState({})是通过使用forceUpdate()。
上面的代码使用setState运行，如下所示。
class MyComponent extends React.Component {
handleButtonClick = ()=>{
this.setState({ });
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick}>
Click me
</button>
</div>
)
}
}
ReactDOM.render(<MyComponent /> , mountNode);
