关于 react 编程思路的问题

第一次提问竟然有这么多回复，总之感谢大家，可能是我有点思维定势了吧，过去编程一般我会在Controller读取设置并将它或它的一部分传递给相应Component，然后调对应Component的function来解决问题，所以我觉得单向的数据流没有什么问题，问题是react中的数据流是大概率会被改动的，这就需要一些状态逻辑，而SubComponent中状态逻辑的方法基本只能通过它自己JSX中事件的回调，换言之这些方法调用的位置被限定死了，所以我有点懵，在想这是不是故意设计来规避某些写法来的。

具体问题是我在用@material-ui的Snackbar，因为它的设置比较多，所以我稍稍封装了一下，这样就相当于有一部分状态在SubComponent中，而SubComponent本身又要暴露一部分状态在FatherComponent中，比如使用open来进行开关，然后我写了下面错误代码：

//SubComponent function SnackBar(props) { const [state, setState] = React.useState({ anchorOrigin: props.state.anchorOrigin || { horizontal: 'right', vertical: 'top' }, open: props.state.open || false, Transition: props.state.Transition || Slide, }); const handleClose = () => { setState({ ...state, open: false, }); }; return ( <Snackbar open={state.open} OnClose={handleClose} autoHideDuration={3000} key={state.Transition.name} > <Alert OnClose={handleClose} severity="success"> This is a success message! </Alert> </Snackbar> ); } //FatherComponent function FatherComponent(props) { // ...other code return ( // ...other code <SnackBar state={state}></SnackBar> ); } 

毫无疑问没有反应，因为这样SubComponent的state不会被更新，当时就想要是可以直接外部调用SubComponent的方法设置open就好...后来发现更新props也算副作用来的，需要用useEffect来更新，如果是class component应该是在componentWillUpdate加入setState的逻辑。

如果一定要在父组件调用子组件的方法，可能就是ref了，感谢大佬们~