React的状态提升是什么?使用场景有哪些?

简介: React的状态提升是什么?使用场景有哪些?

1. 什么是状态提升:

状态提升是指,公共父组件统一管理子组件状态的过程。

2. 为什么要做状态提升:

当两个子组件渲染同一个数据的不同状态时,并且要求两个子组件数据同步变化,子组件之间不能相互作用,这时,就需要提升到公共父组件处理要渲染的数据。

例如:官网 摄氏度和华氏度控制水沸腾的例子

3. 数据流向:

状态管理组件(父组件) 通过 【属性绑定】 状态 和 改变状态的方法

子组件通过 props 获取数据和父组件的方法,通过 this.props 渲染数据,调用方法。

概述 / 总结

React的状态提升就是用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的状态,这也是React单项数据流的特性决定的。官方的原话是:共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。 这被称为“状态提升(Lifting State Up)”。


概括来说就是将多个组件需要共享的状态提升到它们最近的父组件上,在父组件上改变这个状态然后通过props分发给子组件。

举例

一个简单的例子,父组件中有两个input子组件,如果想在第一个输入框输入数据,来改变第二个输入框的值,这就需要用到状态提升

class Father extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            Value1: '',
            Value2: ''
        }
    }
    value1Change(aa) {
        this.setState({
            Value1: aa
        })
    }
    value2Change(bb) {
        this.setState({
            Value2: bb
        })
    }
    render() {
        return (
            <div style={{ padding: "100px" }}>
                <Child1 value1={this.state.Value1} onvalue1Change={this.value1Change.bind(this)} />
                                <Child2 value2={this.state.Value1} />
            </div>
        )
    }
}
class Child1 extends React.Component {
    constructor(props) {
        super(props)
    }
    changeValue(e) {
        this.props.onvalue1Change(e.target.value)
    }
    render() {
        return (
            <input value={this.props.Value1} onChange={this.changeValue.bind(this)} />
        )
    }
}
class Child2 extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <input value={this.props.value2} />
        )
    }
}
ReactDOM.render(
    <Father />,
    document.getElementById('root')
)
相关文章
|
7月前
|
移动开发 前端开发 JavaScript
react HashRouter 与 BrowserRouter 的区别及使用场景
react HashRouter 与 BrowserRouter 的区别及使用场景
123 0
|
前端开发 JavaScript 小程序
7 款最棒的开源 React UI 库测评 - 特别针对国内使用场景推荐
优秀的 React UI 组件库,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React UI 库,特别针对国内使用场景推荐。
1060 0
|
移动开发 前端开发 小程序
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
优秀的 React UI 移动端组件库和模版框架,帮我们节省开发时间,提高开发效率,统一设计语言。更棒的是内置的功能复杂,我们自己很难处理的常用组件,比如表格、表单、富文本编辑器、时间日期选择器、实时拖拽组件等,再进一步,还有帮我们把组件的轮子装好的 React admin 后台管理系统。本文推荐 7 款适用于中文使用者习惯的开源 React 移动端 UI 库,特别针对国内使用场景推荐。
5094 0
|
4月前
|
前端开发 JavaScript API
React Hooks 的使用场景有哪些?
【8月更文挑战第25天】
56 2
|
移动开发 前端开发 JavaScript
react HashRouter 与 BrowserRouter 的区别及使用场景
react HashRouter 与 BrowserRouter 的区别及使用场景
499 0
|
前端开发 开发者
react有状态组件和无状态组件的理解及使用场景?
react有状态组件和无状态组件的理解及使用场景?
138 0
|
前端开发
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-useRef得使用场景
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-useRef得使用场景
62 0
|
前端开发 API Java
React拾遗:Render Props及其使用场景
第一次见到这个语法时,大多会很惊讶,因为日常代码里props.children必然是字符串或者元素。但事实上props.children可以是函数,只要最终生成的render的返回值是dom元素就行。例如:
1435 0
|
7月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
381 0
|
7月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
130 0