关于 react 编程思路的问题

[DreamTrace]

萌新，最近看了一下react，感觉它很依赖于状态管理？不知道是不是因为JSX语法的原因，函数 /类组件只能在<ComponentName />中传入相应props，如果父组件要访问子组件的方法就必须传入一个类似SetHandler()的方法把子组件的方法绑定到父组件的state上，而这样不就相当于把子组件的state和function移到父组件上吗？似乎没有类似SubComponentName.funName()的访问方式...有点迷茫，可能说的不是很清除，不知道大家是怎么解决这个问题的？

[ccraohng]

只关心组件自己的状态维护，如果你只是改变子组件的数据，可以改成受控组件。比较复杂的函数操作，比如 `slider.next()`，通过 ref 暴露就行。

[zhaol]

// 子组件
class ComponentName {

componentDidMount() {
this.props.onReady && this.props.onReady(this)
}

aaa = () => {}
}

//父组件
class Father {
subComponentName = null

componentDidMount() {
this.subComponentName.aaa()
}

render() {
return <ComponentName onReady={(instance)=>{this.subComponentName = instance}}/>
}
}

[zhaol]

@zhaol 不建议这样做,但是有时候业务很麻烦,这样做确实会方便.

[towry]

看看 react 的 ref 是怎么实现的。

[DreamTrace]

@zhaol 没有看懂......`onReady`似乎是`props`上的一个变量，我应该看哪里？

[zhaol]

@DreamTrace 就是 ref 的手动实现,子组件通过 onready 把组件实例抛到父组件用一个变量(subComponentName)保存,这样你就可以通过这个变量调用子组件里面的属性和方法了

[qiuxuqin]

@beizhedenglong react 的数据变更函数是通过父组件传到子组件的，在子组件调用 setState 函数实际上是调用父组件的方法，更改父组件的数据，然后传给子组件的那个数据也跟着变了，所以 React 实际上还是数据单向传送的。vue 的 emit 是在子组件通过事件通知父组件，它这个数据变更是通过子组件往上传的，所以是双向流动。

[qiuxuqin]

@beizhedenglong 可能我这个解释也不一定准确。我再解释一下：vue 的 v-model 语法其实就算是双向绑定，虽然说它是$props.value 和 emit('change', value ）的语法糖。另外如果某个 prop 是个对象，是可以直接修改这个对象的 key 的，这样父组件和子组件也可以的这个对象值也会改变，视图也会更新（当然如果是原始值会报错）。

[beizhedenglong]

@qiuxuqin VUE 实现导致的，它不建议你直接改，react 你也可以直接改

[qiuxuqin]

@beizhedenglong vue 修改 prop 对象内部的值，它还是响应式的，视图会更新。react 直接修改 prop，视图并不会更新，要用 setState 才会触发视图更新。