为了账号安全,请及时绑定邮箱和手机立即绑定
  • react中 调用setState方法会自动触发render方法调用  促使页面更新

  • react 属性只能自上而下传递,不能从下往上传递

    {...props} 可以直接接受所有从父节点传下来的所有属性  减少代码  使属性更新的 难度降低

  • react学习 1 安装https服务器 python
    00:45
    看视频
  • var letterStyle = {
    background:this.props.bgColor
    }
    <div style={letterStyle}>this.props.children</div>
    
    <Letter bgColor = "#52bbff">T</Letter>
    <Letter bgColor = "#3ce">Y</Letter>


  • {this.props.greetTarget}

    greetTarget = "Nancy"


  • props被变更时,会触发一系列的周期。

    首先,第一个被调用的生命周期函数是:

    componentWillReceiveProps: function(newProps){ } :  返回写return就OK。

    接下来被调用的函数与上一节类似,顺序如下:

    shouldcomponentUpdate

    componentWillUpdate

    render

    componentDidUpdate




  • componentWillUnmount : 如果组件要被从这个DOM里拿掉,就调用此函数。这个函数可以做这个组件被删除前的收尾工作。

    ReactDOM.unmountComponentAtNode()用来直接导致组件被删除。此案例中被用在componentWillUnmount中。


  • shouldComponentUpdate: function(newPros, newStae){}

    shouldComponentUpdate生命周期函数返回false,react会停止调用后面的生命周期函数; 返回true,会调用compnentWillUpdate,再由他来调用render,更新组件在该界面上的显示。

    componentWillUpdate:如果shouldComponentUpdate返回true,此函数将被调用,此函数返回return就好。

    componentDidUpdate: componentWillUpdate实现完后被调用


  • getDefaultProps:组件加载前被调用,被调用的时候,组件在构造this.props对象,return { }中的“{ }”为this.props

    getInitialState: 用来创建组件原生的状态对象this.stae。 return { }中的“{ }”,这个空的对象为this.state

    componentWillMount : 组件被挂载到DOM节点之前,会调用此函数,告诉我们此组件即将被加载,调用完后,组件会调用render函数。返回直接写return就ok 。

    componentDidMount : 当这个函数被调用,程序就知道当前组件已经成功加载到浏览器中了(render函数已把component绘制到界面上)

  •  React组件声明周期函数:

    1. componentWillMount

    2. componentDidMount

    3. componentWillUnmount

    4. componentWillUpdate

    5. componentDidUpdate

    6. shouldComponentUpdate

    7. componentWillReceiveProps

  • ... 三点操作符,把一个css对象融入另一个css对象中

  •  属性,类名,不能是class,是className,因为class是react的关键词

    children是react的固有属性

  • React中写样式:

        ①、使用className,在style标签中写css样式

        ②、使用style={},在render: function() {} 中增加变量,注意:样式改用用font-size->fontSize


  • 1、创建组件

    React.createClass({

            getInitialState: function(){

                return {};

            },

            render: function(){

                const styleJson = {

                     color: red;

                     fontSize: 14;

                }

                return (

                    <div style={styleJson }>my component<div>

                )

            }

    })

    2、挂载react实例

    ReactDom.render({

        <div>my app</div>,

        destination

    })

    3、组件返回jsx

    render: function(){}

    当父组件调用了render函数会触发子组件也调用render函数

    4、组件被渲染之前

      this.getInitialState()

    5、组件被render之前

    this.componentDidMount()

    6、状态管理

         6.1设置状态

             this.state = {}

         6.2  this.getDefaultProps() 对应this.props对象

         6.3修改状态

             this.setState()

    7、组件样式对象

        styleJson = {

             color: red;

             fontSize: 14;

        }

        使用样式

        <myComponent style={stylejson} />

    8、生命周期

        8.1组件被挂载到容器之前

        this.componentWillMount() 

        8.2组件被渲染到容器中

        ReactDom.render()

        

        8.3组件被成功挂载到容器之后

        this.componentDidMount()

        this.componentWillMount -》 this.render() -> this.componentDidMount()

        

        8.4当数据变化时,判断属性或者状态改变是否满足更新条件,this.shouldComponentUpdate()第一个被调用

            shouldComponentUpdate: function(props, newState){

                 if(..){

                      return true

                 } else {

                    // 将组件从dom中销毁

                     ReactDom.unmountComponentAtNode(destination); 

                     return false;

                 }

            }

        8.5更新之前

            this.componentWillUpdate()

        8.6更新之后

            this.componentDidUpdate()

        8.7组件被销毁前最后一次通知

            this.componentWillUnmount()

        8.8当组件属性更改之后调用的生命周期

            componentWillReceiveProps: function(newProps){}

            改变属性调用生命周期比改变state时多了this.componentWillReceiveProps()

举报

0/150
提交
取消
课程须知
1、掌握HTML、CSS 2、掌握JavaScript
老师告诉你能学到什么?
1、使用React轻松地创建用户交互界面 2、了解JavaScript扩展语法JSX 3、使用JSX简单快速编写界面模板
意见反馈 邀请有奖 帮助中心 APP下载
官方微信