这是一个创建于 1634 天前的主题，其中的信息可能已经有所发展或是发生改变。
在学习和使用 MobX 的时候遇到了一点问题：函数组件中可以正常触发组件重渲染，但是在相同行为的类组件中无法触发重渲染。 请问大神们这是为何？
依赖版本：
mobx: 6.2.0
mobx-react: 7.1.0
react: 16.8.6
react-dom: 16.8.6
可复现的代码：
import React from "react" import ReactDOM from "react-dom" import {makeAutoObservable} from "mobx"; import { observer } from "mobx-react" class Timer { secOndsPassed= 0 constructor() { makeAutoObservable(this) } increase() { this.secondsPassed += 1 } reset() { this.secOndsPassed= 0 } } const myTimer = new Timer() const TimerView = observer((props) => ( <button OnClick={() => props.timer.increase()}>Seconds passed: {props.timer.secondsPassed}</button> )) const Demo = observer(class Demo extends React.Component { public render = () => { return <button OnClick={() => this.props.timer.increase()}>Seconds passed: {this.props.timer.secondsPassed}</button> } }) ReactDOM.render(<> <Demo timer={myTimer} /> <TimerView timer={myTimer} /> </>, document.body)  | 1 JK9993 2021-04-22 14:27:03 +08:00 请使用 state |
| 2 JK9993 2021-04-22 14:28:08 +08:00 看错了，抱歉 |
 | 3 lblblong 2021-04-22 14:51:37 +08:00 |
 | 4 SilencerL 2021-04-22 15:01:23 +08:00 |
| 5 lblblong 2021-04-22 15:50:31 +08:00 @SilencerL 好像是这样的，见笑了 我仔细看了下，楼主可能是类方法写错了，不能这么定义类方法吧 public render = () => {..} 改成 render(){} 或者 const render = () => {} 应该就可以了 |
 | 6 ytxbnahn 2021-04-22 16:03:27 +08:00 ``` const Demo = observer( class Demo extends React.Component { render() { return ( <button OnClick={() => this.props.timer.increase()}> Seconds passed: {this.props.timer.secondsPassed} </button> ); } } ); ``` |
| 7 JK9993 2021-04-22 16:40:38 +08:00 用 `observer` 包装 Class Component 的时候，它会使用 `makeClassComponentObserver` 方法。该方法会修改组件的 [`render` 方法]( https://github.com/mobxjs/mobx-react/blob/baa737e4faf458e3f4c89edebacfb8774b64353d/src/observerClass.ts#L55)，这样才能收集到依赖。 而当你使用箭头函数的时候，如果你使用 `bebel` 或者其他编译器向低版本转化的话，箭头函数就会变成在构造函数中赋值的形式。 这个时候 `makeClassComponentObserver` 取到的该组件的 `render` 属性为 undefined，这样就会收集不到依赖，因此无法更新。 |
Select Language