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

Question

我有一个功能组件，并使用react钩子来管理状态。

一旦我在textField中添加onChange（在材质UI中输入），整个组件就会重新渲染，当我删除onChange in textField时，它不会重新渲染

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

上面的图片是组件的重播，即使我没有传递任何道具。

一旦我移除setChannelUrl（e.target.value） 一切正常。

setChannelUrl是反应使用状态钩子

    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，这将防止不需要的呈现：

如果您的函数组件在给定相同道具的情况下呈现相同的结果，则可以将其包装在调用中以进行响应。在某些情况下，通过记录结果来提高性能。这意味着React将跳过渲染组件，并重用上次渲染的结果。

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

export default React.memo(Stats);