当状态改变时，在文本字段上对 onChange 做出反应更新整个组件

Question

我有一个功能组件并使用反应挂钩来管理状态。

只要我在 textField 中添加 onChange（在 material UI 中输入），整个组件就会重新渲染，当我在 textField 中删除 onChange 时，它不会重新渲染

            <TextField
                    id='outlined-basic'
                    label='Outlined'
                    variant='outlined'
                    fullWidth
                    onChange={e => {
                        setChannelUrl(e.target.value);
                    }}
                />

上图是组件重新渲染，即使我没有传递任何道具。

一旦我删除 setChannelUrl(e.target.value); 一切正常。

setChannelUrl 是 react useState Hooks

    const [channelUrl, setChannelUrl] = useState('');
    useEffect(() => {
        console.log('runnedddd');
        return () => {};
    }, []);
    const classes = useStyle();
    return (
        <Grid container spacing={2} className={classes.root}>
            <Grid item md={6}>
                <Typography variant='h6' color='primary' className={classes.button}>
                    Please Enter Your Channel Url
                </Typography>
                <TextField
                    id='outlined-basic'
                    label='Outlined'
                    variant='outlined'
                    fullWidth
                    onChange={e => {
                        setChannelUrl(e.target.value);
                    }}
                />

                <Button fullWidth color='primary' variant='contained'>
                    large
                </Button>
            </Grid>
            <Grid item md={6}>
                <Paper elevation={2} className={`flex flexColumn ${classes.w100}`}>
                    <Avatar alt='Remy Sharp' src=''>
                        H
                    </Avatar>
                    <Typography variant='body' align='center'>
                        Hitesh Choudary
                    </Typography>

                    <Button
                        fullWidth
                        color='primary'
                        variant='contained'
                        className={classes.button}
                    >
                        Save It
                    </Button>
                    <Button
                        fullWidth
                        color='secondary'
                        variant='contained'
                        className={classes.button}
                    >
                        No, its not mine
                    </Button>
                    <Stats />
                </Paper>
            </Grid>
        </Grid>
    );
};

统计组件

import React from 'react';

const Stats = props => {
    console.log(props);

    return <div></div>;
};

export default Stats;

我正在使用函数式组件和箭头函数

Answer 1

Stats 组件根据其父渲染进行渲染。

当用户在文本字段中输入时，父项呈现并且 onChange 通过 setChannelUrl 更新声明。

您可以使用 React.memo 记忆 Stats，这将防止不需要的渲染：

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

const Stats = () => {
    // Won't log on parent render
    console.log('rendered');
    return <div></div>;
};

export default React.memo(Stats);

当状态改变时，在文本字段上对 onChange 做出反应更新整个组件

react onChange on text field update whole component when state is changed

reactjs

material-ui

react-hooks

react-state