React学习笔记(五) 状态提升

状态提升究竟是什么东西呢？别急，下面让我们一步一步来看看究竟要怎么使用状态提升

假设我们有这样一个需求，提供两个输入框（分别属于两个组件），保证输入框里面的内容同步

好，下面我们先来封装一个输入框组件 Input

class Input extends React.Component {
    constructor(props) {
        super(props)
        // 输入框里的内容保存在组件的 state 当中
        this.state = { content: '' }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        this.setState({ content: e.target.value })
    }

    render() {
        return (
            <input type='text' value={ this.state.content } onChange={ this.handleChange } />
        )
    }
}

然后我们另外定义一个组件 AllInput，在这个组件中包含两个 Input 组件，这样我们就得到两个输入框

class AllInput extends React.Component {
    constructor(props) {
        super(props)
    }
    
    render() {
        // 这里包含两个 `Input`  组件
        return (
            <div>
            	<Input />
                <br /><br />
                <Input />
            </div>
        )
    }
}

好，下一个要解决的问题是怎么使两个输入框的内容同步

在两个 Input 组件中，它们各自的内容保存在各自的 state 当中，要怎么做才能使两个组件共享数据呢？

答案是 状态提升，即将两个组件需要共享的数据保存在共同的父组件中，然后子组件通过 props 获取父组件数据

也就是说，我们可以将两个子组件 Input 的数据保存在它们的父组件 AllInput 当中

我们先来看看怎么修改父组件的定义：

class AllInput extends React.Component {
    constructor(props) {
        super(props)
        // 在父组件中添加 state 对象，用于保存数据
        this.state = { content: '' }
        this.handleContentChange = this.handleContentChange.bind(this)
    }
    
    // 定义修改 state 的方法，通过 props 传递给子组件使用
    // 接收一个参数（新的数据）
    handleContentChange(newContent) {
        this.setState({ content: newContent })
    }
    
    render() {
        // 通过 props 将 state 和修改 state 的方法都传递给子组件
        return (
            <div>
            	<Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
                <br /><br />
                <Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
            </div>
        )
    }
}

然后我们再来修改子组件定义：

class Input extends React.Component {
    constructor(props) {
        super(props)
        // 数据可以不再保存在子组件的 state 当中
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        // 通过 props 获取父组件的 setState（修改数据的方法）
        // 传入一个参数（新的数据）
        this.props.onContentChange(e.target.value)
    }

    render() {
        // 通过 props 获取父组件的 state（数据）
        return (
            <input type='text' value={ this.props.content } onChange={ this.handleChange } />
        )
    }
}

通过状态提升，这样就可以实现组件之间的数据共享啦，一份完整的可运行的代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone"></script>
</head>

<body>
    <div id="app"></div>

    <script type="text/babel">
        class Input extends React.Component {
            constructor(props) {
                super(props)
                this.handleChange = this.handleChange.bind(this)
            }

            handleChange(e) {
                this.props.onContentChange(e.target.value)
            }

            render() {
                return (
                    <input type='text' value={ this.props.content } onChange={ this.handleChange } />
                )
            }
        }
        
        class AllInput extends React.Component {
            constructor(props) {
                super(props)
                this.state = { content: '' }
                this.handleContentChange = this.handleContentChange.bind(this)
            }

            handleContentChange(newContent) {
                this.setState({ content: newContent })
            }

            render() {
                return (
                    <div>
                        <Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
                        <br /><br />
                        <Input content={ this.state.content } onContentChange={ this.handleContentChange }/>
                    </div>
                )
            }
        }
        
        ReactDOM.render(
            <AllInput />,
            document.getElementById('app')
        )
    </script>
</body>

</html>

【 阅读更多 React 系列文章，请看 React学习笔记 】

posted @ 2019-08-08 13:20  半虹  阅读(2925)  评论(0)  编辑  收藏  举报