zoukankan      html  css  js  c++  java
  • react入门(4)

    十四、props和state的混搭使用

    案例19:(在 react入门2和3 里讲过的东西,这里简单讲解一下,不再细说)

    <!DOCTYPE html>
    <html>
    <head>
        <title>react入门</title>
        <meta charset="utf-8">
        <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            var Parent = React.createClass({
                getInitialState:function(){
                    return {
                          val:'123'
                    };
                },
                changes:function(event){
                    this.setState({val:event.target.value})
                },
                render:function(){
                    return (
                        <div>
                            <input type="text" value={this.state.val} onChange={this.changes} />
                            <Child txt={this.state.val} />
                        </div>
                    )
                }
            });
    
            var Child = React.createClass({
                render:function(){
                    return (
                        <div>{this.props.txt}</div>
                    )
                }
            });
    
            ReactDOM.render(
                <Parent />,
                document.getElementById('example')
            )
        </script>
    </body>
    </html>

    效果如下

    分析如下

    1. Parent组件,设置初始值

    2. Parent组件,this.state.val获取value的初始值,input值发生改变就触发onChange事件,调用changes方法

    3. Parent组件,通过setState重新给val赋值

    这里event.target指的就是input,event.target.value就是input的值

    我们在 react入门3 里讲过 refs,这里也可以通过给input设置一个ref属性,通过this.refs.xxx来获取input

    4. 在父组件Parent里,Child标签上有一个txt属性,这个属性的属性值就是this.state.val,也就相当于世input的value值,它是一个变化的值,这里也就是要将父组件Parent的信息(val值)传递给子组件Child

    5.在子组件Child里,通过this.props.txt来获取父组件传递过来的信息。这里就是获取父组件Parent里,Child标签上,txt属性的值

    总结一下上面这个例子:

    1. 我们在子组件Child里,通过this.props.txt获取父组件Parent传过来的信息,即父组件里txt属性的值。

    2. txt属性对应的值,是通过this.state.val来读取的getInitialState里面设置的val的值,即123,这是初始状态。

    3. input上绑定了onChange事件,当input值发生改变的时候,触发changes方法

    4. changes方法里面,通过setState给val重新赋值

    5. 因此最终呈现在页面上的效果就是,当你修改了父组件里input的值,子组件Child里的内容也会跟着一起改变

    案例20:

    <!DOCTYPE html>
    <html>
    <head>
        <title>react入门</title>
        <meta charset="utf-8">
        <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            var Parent = React.createClass({
                getInitialState:function(){
                    return {
                          txt:'您好'
                    };
                },
                render:function(){
                    return (
                        <div>
                            <Child txt={this.state.txt} />
                        </div>
                    )
                }
            });
    
            var Child = React.createClass({
                getInitialState:function(){
                    return {
                          txt:this.props.txt
                    };
                },
                render:function(){
                    return (
                        <div>{this.state.txt}</div>
                    )
                }
            });
    
            ReactDOM.render(
                <Parent />,
                document.getElementById('example')
            )
        </script>
    </body>
    </html>

    效果如下

    父组件 Parent 的解析如下所示

    子组件 Child 的解析如下所示

    在这里值得一提的是,在子组件里,从父组件传递的信息(this.props.txt)可以用来设置初始值

    十五、state与props的对比

    看一下他们之间的区别吧

    属性Props

    • 属性被传递的方式,一般在组件被调用的时候传入
    • 可以获取父组件的初始值、修改值,也可以获取父组件的属性、方法(this.props.xxx)
    • 可以设置初始值(getInitialState)
    • 从父组件里传递过来的信息,可以用来设置子组件的初始值
    • 父元素赋予的,不可以在子组件里被修改

    状态state:

    • 需要在组件内部去声明
    • 可以设置初始值(getInitialState)
    • 父组件的state,不可以用来设置子组件的初始值
    • 可以在组件内部修改 (setState)

    十六、生命周期

    官网定义戳这里

    React生命周期总体分为三个状态:

    • 挂载 mounted (初始化时候)

    当我们看到页面元素从jsx变成dom节点的时候,react组件已经被载入(mounted)到页面中。

    • 更新 update(组件在运行中如果发生状态和属性的变化发生的)

    当react组件中的数据发生变化的时候,需要重新渲染页面(重新更新页面元素的时候,例如获取本次数据与上次数据不一样,需要重新更新页面数据),此时需要将react组件重新渲染一次。

    • 移除 unmount(组件卸载和销毁状态)

    当组件需要被从页面中废弃和销毁的时候,就需要将react组件从页面中删除掉。

     

    React提供生命周期方法,你可以在这些方法中放入自己的代码。React提供will方法,会在某些行为发生之前调用,和did方法,会在某些行为发生之后调用。

    十七、挂载 mounted 

    • getDefaultProps()

    设置组件内部属性(一般用于设置组件内部的常量),比如,请求一个ajax,请求的url就可以设置成内部属性,因为url是不变的。返回对象

    • getInitialState()

    设置组件内部的状态,返回对象(初始的state数据)。

    • componentWillMount()

    组件即将加载时,在这时可以获取ajax数据,并解析。

    • render()

    默认创建jsx --> dom,默认返回JSX

    • componentDidMount()

    组件加载完毕时,挂载的状态。可以获取渲染后的dom节点,调用第三方插件(例如jq)

     

    上面的五个函数是每个react组件初始化阶段走过五步,开发中,不需要用时可以不写(getInitialState已经在上面使用过了,其他几个书写方式类似)。

     

    易错点:render只负责渲染,每次数据刷新都调用render函数

     

    案例21:

    <!DOCTYPE html>
    <html>
    <head>
        <title>react入门</title>
        <meta charset="utf-8">
        <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
        <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
        <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
            var Test = React.createClass({
                getDefaultProps:function(){
                    console.log("1 get props")
                    return {}
                },
                getInitialState:function(){
                    console.log("2 get state")
                    return {}
                },
                componentWillMount:function(){
                    console.log("3 wiil mount")
                },
                render:function(){
                    console.log("4 render")
                    return (
                        <div>
                            你好
                        </div>
                    )
                },
                componentDidMount:function(){
                    console.log("5 did mount")
                }
            });
    
            ReactDOM.render(
                <Test />,
                document.getElementById('example')
            )
        </script>
    </body>
    </html>

    效果如下

    这个例子是按照执行顺序去写的,这几个函数你也可以不按照这个顺序去写。

     

    十八、更新 update

    • componentWillReceiveProps(nextProps)

    当挂载的组件收到新的props时,调用次函数。

    该方法用于比较this.props和nextProps,当两者不同的时候,使用this.setState()来改变state

    • shouldComponentUpdate(nextProps,nextState)

    当组件接收到新的props、state时,要做出是否更新dom的决定,这时函数被调用,返回boolean。

    可以写入一些逻辑,控制数据的更新。实现该函数,优化this.props和nextProps,以及this.state和nextState,如果不需要React更新DOM,则返回false。

    • componentWillUpdate(nextProps,nextState)

    在组件重新渲染之前执行,在渲染之前最后的props和state都发生了改变,这个函数使用很少,一般用在日志和记录的打印。

    你可以在这里调用this.setState()

    • componentDidUpdate()

    当组件重新渲染完毕后调用

     

    组件运行中生命周期函数被触发的条件

    • 当父组件修改子组件的属性props时
    • 当组件自身修改状态state时

     

    十九、移除 Unmount

    componentWillUnmount()

    在组件移除和销毁之前被调用。清理工作应该放在这里。这个函数很少用到,因为浏览器本身具有垃圾回收机制

     

     

     

  • 相关阅读:
    What is systemvolumeinformation? delete it?
    What is "found.000" ? How to deal with it?
    install Mac OS on Vmware
    字符串数组全排列
    Hadoop开发相关问题
    String直接赋值和使用new的区别
    输入两个递增排序的链表,合并这两个链表并使新链表中的结点仍然是按照递增排序的
    括号匹配问题
    预编译语句
    两个有序单链表合并成一个有序单链表的java实现
  • 原文地址:https://www.cnblogs.com/sakurayeah/p/5922332.html
Copyright © 2011-2022 走看看