Some proble with React

Mingzhe An — Thu, 10 Dec 2020 17:19:03 +0000

When use react with out any flux framework, I found that when create some components to build one page, I must make too many state in each components and can't share the state between two compnents.

for example my metting room app that is a meeting app like zoom implement by webrtc:

question 1:

when I try to make sure the layout full in the screen, I must listen the window resize event to change every conponent's height and width. So, how many conponents I wrote how many resize event function I must implement. I can't write just onece in the root conpnent and share the window height and width data to children.

import React from 'react';
import {List} from 'antd';
import { UserListItem } from './UserListItem';

export class UserList extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            height : window.innerHeight - 40
        }
    }

    componentDidMount(){
        window.onresize = ()=>{
            this.setState({
                height:  window.innerHeight - 40
            })
        }
    }

    render(){
        return(
            <List 
                className = 'user-list'
                header =  'All Users'
                style = {{height: this.state.height + 'px'}}
                dataSource = {this.props.users}
                renderItem = { item => (
                    <List.Item>
                        <UserListItem user={item}/>
                    </List.Item>
                )}>
            </List>
        )
    }

}

question 2:

I have a user list for one page, when the user list changed I can't notify change and trigger the change in other conpnent.

so, I should use one store.js to manage the state, should I use redux? I'm new for react...

DEV Community: Mingzhe An

Some proble with React

question 1:

question 2: