reactjs - react 。嵌套组件的 render 方法的顺序以及它如何与 Redux 一起使用

Question

我正在处理一个在页面上显示类(class)的项目。为了获取类(class)，我使用 redux 来存储获取的类(class)。以下是类(class)主页面:

类(class).js:

class Course extends Component{
    constructor(props){
        super(props);
        this.state = {
            id: "",
        }
    }

    render() {
        return(
            <CourseWrapper>
                {/* <Fragment> */}
                    <div className={"test"}>
                        {console.log(store.getState()),
                        this.props.currentCourse.length < 1 ? null : this.props.currentCourse[0]["units"]}
                    </div>
                        <Dashboard />
                    <div>
                        {}
                    </div>        
                {/* </Fragment> */}
            </CourseWrapper>
        );
    }
}

const mapStateToProps = state => {
    return{
        currentCourse: state.courses.currentCourse,
    }
}

我在 CourseWrapper 组件的构造函数中发出“getCourse()” Action 。

CourseWrapper.js:

class CourseWrapper extends React.Component{

    constructor(props){
        super(props);  
        console.log("wrapper")
        this.props.getCourseTest("noUse");
    }

    render(){    
        return(
            <div>
                {console.log(this.props.children),
                this.props.children}
            </div>
        )
    }
}

const mapDispatchToProps = dispatch =>{
    return {
        getCourseTest: noUse => dispatch(getCourse(noUse)),
    }
}

export default connect(null,mapDispatchToProps)(CourseWrapper);

我查看console.log，发现 1. 第一个日志是显示没有类(class)的商店的初始状态的日志，然后是 2. CourseWrapper.js 构造函数中的“wrapper”，以及下一个 3. child 包裹，终于 4. 'store.getStore()' 再次包含预期的类(class)对象。

我的问题是:为什么第一个日志是商店的初始状态而不是“包装器”？并且里面没有类(class) obj 。它导致了下一个问题，最初我认为首先调用 CourseWrapper 的构造函数，它调度 'getCourse' Action ，然后它的子元素被渲染。但是，日志显示以某种方式 {console.log(store.getState()) 首先被调用，CourseWrapper 不是首先被渲染吗？或者我对渲染实际上如何安排嵌套组件有一些误解

Answer 1

https://reactjs.org/docs/faq-state.html

Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately ...

CourseWrapper内部使用 Course这意味着 CourseWrapper已建成 内 Course.render ... 和

render实际上不渲染任何东西，它构造了一个描述，说明一段时间后 React 应该渲染什么。你可以说 JSX 翻译成类似的东西

render() {
  return(
    create_node(CourseWrapper,
      ...
      create_node(div,
        ...
        console.log(store.getState()),
        ...
      )
    )
  )
}

所以，正如你所看到的 console.log(store.getState())内部调用 Course.render ，然后在 create_node 中的某处被称为 new CourseWrapper然后 CourseWrapper.render ，然后才console.log("wrapper")
(不要认为它是一个实际的 React 算法，它只是过于简单化的原理)

然后遵循相同的想法:<div> ...好的，<div>很难称它为CourseWrapper 的 child ... 假设CourseWrapper.render看起来像这样

render(){    
    return(
        <div>
            <SomeChild/>
            {this.props.children}
        </div>
    )
}

那么 SomeChild 是 CourseWrapper 的 child , 和 this.props.children - 也是它的 child ，但同时 this.props.children已经在里面创建 Course 之前 CourseWrapper , SomeChild在内部创建 CourseWrapper 后 它