react中数据承载--props和state用法

最新推荐文章于 2020-10-18 17:19:23 发布

Cupid510

最新推荐文章于 2020-10-18 17:19:23 发布

阅读量292

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_44283432/article/details/108354527

版权

react 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

react中数据承载

react中数据承载的两种方式：

props: 自己可以设置默认属性，也可以从外部传入属性，但是外部传入的属性，自己只能用，不能用来修改

state: 一般由自己控制，自己可以进行状态的更改。

props

函数组件

函数式组件中：
通过参数props.xxx获取外部传入的属性值

<body>    
    <div id="app"></div>
    <script type="text/babel">           
        const App = function(props){
            return (
                <div>
                    我是app组件！ --- { props.username }  --- { props.age+1 } --- {props.sex} --- {props.address}
                </div>
            )
        }
        let obj = {
            sex:"女"
        }
        let other = {
            address:"贫民窟"
        }
        ReactDOM.render(<App {...other} sex={obj.sex} username={"张三"}  age={10} />,document.getElementById("app"))
    </script>
</body>

类组件

类组件中：
通过this.props.xxx获取外部传入的属性值

<body>    
    <div id="app"></div>
    <script type="text/babel">      
        class App extends React.Component{
        render(){
          let {sex,username,age} = this.props;
                 return (
                     <div>
                        我是app组件！ --- { username }  --- { age+1 } --- {sex} --- {this.props.address}
                    </div>
                )
            }
         }        
        let obj = {
            sex:"女"
        }
        let other = {
            address:"贫民窟"
        }
        ReactDOM.render(<App {...other} sex={obj.sex} username={"张三"}  age={10} />,document.getElementById("app"))
    </script>
</body>

state

类组件

状态一般放在constructor进行定义，在构造函数中进行初始化

<body>
    
    <div id="app"></div>
    <script type="text/babel">

        //举例 计数器案例
        let a = 1
        class Counter extends React.Component{
            //状态一般放在constructor进行定义的
            constructor(){
                super()
                this.state = {  //状态通常在构造函数中进行初始化
                    count:1
                }
            }

            handleClick = ()=>{
                // this.state.count = this.state.count+1
                // this.forceUpdate() 

                // react中推荐采用setState，就可以实现数据改变，视图更新操作了
                // setState方法是异步的，如果想要获取更新后的最新状态，需要写在第二个参数中
                // this.setState({
                //     count: this.state.count+1
                // },()=>{
                //     console.log(this.state.count)
                // })


                // 这种形式的 setState() 也是异步的，并且在同一周期内会对多个 setState 进行批处理，下方的函数执行了三次，但是结果仍是2
                // Object.assign() 
                /* this.setState({
                    count:this.state.count+1
                })
                this.setState({
                    count:this.state.count+1
                })
                this.setState({
                    count:this.state.count+1
                }) */


                // 如果后续状态取决于当前状态，我们建议使用 updater 函数的形式代替
                // 下方的代码会依次执行
                // this.setState((prevState)=>{
                //     return {
                //         count: prevState.count+1
                //     }
                // },()=>{
                //     console.log(this.state.count)
                // })
                // this.setState((prevState)=>{
                //     return {
                //         count: prevState.count+1
                //     }
                // })
                // this.setState((prevState)=>{
                //     return {
                //         count: prevState.count+1
                //     }
                // })

            }

            render(){
                return (
                    <div>
                        <p>{this.state.count}</p>    
                        <button onClick={this.handleClick}>更改counter</button>
                    </div>
                )
            }
        }


        class App extends React.Component{
            render(){
                return (
                    <div>
                        <Counter/>    
                    </div>
                )
            }
        }


        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>
</body>

函数组件

在函数组件中，我们可以采用 React 16.8 useState 这个hooks来去同时定义一个状态和一个更改状态的方法

<body>
    
    <div id="app"></div>
    <script type="text/babel">
        const App = props=>{
            //定义了一个状态 count=1
            //定义了一个更改状态的方法 setCount
            const [count, setCount] = React.useState(1);
            const [title,setTitle] = React.useState("hello");
            return (
                <div>
                    App --- {count} -- {title}
                    <p><button onClick={()=>{setCount(count+1)}}>更改count</button></p>   
                    <p><button onClick={()=>{setTitle('你好')}}>更改title</button></p>   
                </div>
            )
        }
        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>
</body>