react---props和state

最新推荐文章于 2023-06-06 08:54:38 发布

HongfeiAn

最新推荐文章于 2023-06-06 08:54:38 发布

阅读量133

点赞数

分类专栏： react 前端文章标签： react reactjs

本文链接：https://blog.csdn.net/qq_41601327/article/details/105462547

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

react

8 篇文章 0 订阅

订阅专栏

props

props是react中一个重要的属性是组件对外的接口我们props就可以从组件的外部向组件的内部进行数据的传递
也可以完成父组件向子组件的数据传递
注意：无论是无状态组件还是类组件我们都不能修改自身的props

props在无状态组件中基础使用

  <div id="demoReact"></div>
    <script type="text/babel">
    function Com(props){
        return(
            <div>我是一个无状态组件----外部传递的数据是：{props.text}-----{props.num}</div>
        )
    }
    // let demo="我是数据";
    let obj={
        text:'我是数据',
        num:'我是num'
    }
        ReactDOM.render(<Com {...obj}/>,document.getElementById('demoReact'));     
    </script>

props在类组件中基础使用

<div id="demoReact"></div>
    <script type="text/babel">
    class Com extends React.Component{
        render(){
            return(
                <div>
                    我是类组件----{this.props.name}------{this.props.num}
                    </div>
            )
        }
    }
    let obj={
        name:'sx',
        num:'111',
    }
        ReactDOM.render(<Com {...obj}/>,document.getElementById('demoReact'));
    </script>

props的验证和默认值

无状态

 <div id="demoReact"></div>
    <script type="text/babel">
    // 1.无状态组件的props验证和默认值
    //默认值需要defaultProps
    function Com(props){
        // props.name=props.name||"我是默认值";
        return(
            <div>我是无状态组件-------{props.name}----{props.age}</div>
        )
    }
    Com.defaultProps={
        name:"我是name的默认值",
    }
    
    // 如果是15X版本react 那么我们可以使用同||的方式来完成
    // function Com(props){
    //     props.name=props.name||"我是默认值";
    //     return(
    //         <div>我是无状态组件-------{props.name}</div>
    //     )
    // }


    // props验证--验证传递进来的数据是否符合我们期望的类型或者要求， 上线模式中请取消props验证
    // 1.引用props-types库 npm i --save props-types


    Com.propTypes={
        name:PropTypes.number,//验证name这个props传递进来的数据必须是number类型
        age:PropTypes.number.isRequired//是否为number切不能为空
    }
    let num=9847;
    let age=11;
        // ReactDOM.render(<Com name="我是name的数据" />,document.getElementById('demoReact'));
        ReactDOM.render(<Com name={num} age={age} />,document.getElementById('demoReact'));
    </script>

类组件

   <div id="demoReact"></div>
    <script type="text/babel">
    //2.类组件的props默认值和props验证

    // 1.默认值 defaultProps
    class Com extends React.Component{
        static defaultProps={
            name:"我是第二种设置默认值的写法"
        }
        render(){
            return(
                <div>我是类组件-------{this.props.name}</div>
            )
        }
    }
    // Com.defaultProps={
    //     name:'我是默认值'
    // }
    // // 2.props验证
    // Com.propTypes={
    //     name:PropTypes.number
    // }
    let nametext=111;
        ReactDOM.render(<Com name={nametext} />,document.getElementById('demoReact'));
        ReactDOM.render(<Com  />,document.getElementById('demoReact'));
    </script>

使用props实现案例：点击标题，列表消失，再次点击，出现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.js"></script>
    <script src="node_modules/prop-types/prop-types.js"></script>
</head>

<body>
    <div id="demoReact"></div>
    <script type="text/babel">
    //当点击页面的标题时，下面内容隐藏，点击之后再次显示
    let bool=true;//控制变量用来保存当前的内容显示和隐藏的状态
    let MyCom=(props)=>{
        return (
            <div style={{display:bool===true?"block":'none'}}>
                {props.arr.map((v,i)=>{
                    return <p key={i}>{v}</p>
                })}
                </div>
        )
    }
    let dataArr=['1','2','3'];
    let Com=()=>{
        return(
            <div>
                <h1 onClick={()=>{bool=!bool;console.log(bool);render();}}>数字展示</h1>
                <MyCom arr={dataArr}/>
                </div>
        )
    }
    function render(){
        ReactDOM.render(<Com  />,document.getElementById('demoReact'));
    }
    render();
    </script>
</body>

</html>

state

state 和props的区别

props是组件对外的接口 state是组件对内的接口

组件内可以引用其他组件组件之间的引用就形成了一个树状的接口如果下层组件需要使用上层组件的数据层组件就可以通过下层组件的props来进行数据的传递因此props就是组件对外的接口

组件除了使用上层传递的数据之外它自身也可能有需要管理的数据这个对内管理数据的属性就是state

主要区别：

state是可变的
props对于当前页面的组件来说他是只读的如果我们想修改props中的数据那么我们修改传递给当前组件数据的父组件中的内容

注意：
react中我们开发者只需要关心的是数据当数据改变的时候页面就会自动地发生改变状态等同于页面中的数据状态/数据改变了--页面中对应的数据绑定内容就会被react自动地进行改变声明式渲染--一切的数据改变操作都不用我们关心，只需要我们声明数据react就会自动地对于数据进行相对应的改变

如果我们想使用状态，那么不能使用无状态组件

state基础使用

   <div id="demoReact"></div>
    <script type="text/babel">
        class Com extends React.Component{
            //在ES6中不管写不写constructor 在new实例的时候都不会上constructor
            // 我们可以不写 但是如果我们写了constructor之后就必须在其中写上super()就是指向父类的构造方法
            constructor(props){
                //如果想在constructor中使用props，那么super中必须写上props
                super(props)

                // 定义state
                this.state={
                    name:'xx',
                    age:18
                }
            }
            render(){
                return(
                    // this.setState({key:newValue}); 异步 react就会自动触发render进行数据的渲染
                    <div>
                        <button onClick={()=>{this.setState({name:"hh"})}}>点击修改state</button>
                    <div>我是一个组件{this.state.name}------{this.state.age}</div>
                        </div>
                )
            }
        }
        ReactDOM.render(<Com  />,document.getElementById('demoReact'));
    </script>

小案例：使用state，进行点击改变内容
注意： this.setState()是异步的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.js"></script>
    <script src="node_modules/prop-types/prop-types.js"></script>
</head>

<body>
    <div id="demoReact"></div>
    <script type="text/babel">
        class Com extends React.Component{
            constructor(props){
                super(props);
                this.state={
                    name:'xx',
                    newHtml:"<p>我是state的内容</p>"
                }
            }
            func=()=>{
                this.setState({
                    name:"haha"
                },()=>{
                    console.log(this.state.name)
                })
                console.log(this.state.name)
            }
            render(){
                return(
                    <div>
                    <button onClick={this.func}>点击我修改</button>
                    {this.state.name}
                    <div>{this.state.newHtml}</div>
                    <div dangerouslySetInnerHTML={{__html:this.state.newHtml}}></div>//用来渲染带有标签的字符串
                    </div>
                )
            }
        }
        ReactDOM.render(<Com  />,document.getElementById('demoReact'));
    </script>
</body>

</html>

在这里插入图片描述
此图是上面代码的运行结果图，对照几处console.log()不难看出this.setState()是异步的，如果想要输出修改过的结果，可以使用回调函数，如上述代码

HongfeiAn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react---props和state

propsprops是react中一个重要的属性是组件对外的接口我们props就可以从组件的外部向组件的内部进行数据的传递也可以完成父组件向子组件的数据传递注意：无论是无状态组件还是类组件我们都不能修改自身的propsprops在无状态组件中基础使用 <div id="demoReact"></div> <script type="t...
复制链接

扫一扫

专栏目录