• React 开发注意事项,注意点


    react优势:

    • 仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
    • 数据变化后,React 概念上与点击“刷新”按钮类似,但仅会更新变化的部分。
    • React 都是关于构建可复用的组件,使代码复用、测试和关注分离(separation of concerns)更加简单。

    注意点:

    1. 加载组件的首字母大写,比如:<HeaderComponent />
    2. 每一个组件的render最外层都要有一个包裹元素

    3. this.props不能修改,this.state可以修改

    4. 页面oclick事件在ios中的Safari不起效果,onClick={this.detail.bind(this, item)} 需要使用其他方式,比如jQuery的绑定事件

    5. string转换成html,dangerouslySetInnerHTML={{__html: ''}}

    6. getInitialState:在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
      getDefaultProps:在组件类创建的时候调用一次,然后返回值被缓存下来。如果父组件没有指定 props 中的某个键,则此处返回的对象中的相应属性将会合并到 this.props (使用 in 检测属性)。

      该方法在任何实例创建之前调用,因此不能依赖于 this.props。另外,getDefaultProps() 返回的任何复杂对象将会在实例间共享,而不是每个实例拥有一份拷贝。

    组件的生命周期:

      componentWillMount:

        服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。
      componentDidMount:

        在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。
      componentWillReceiveProps:

        在组件接收到新的 props 的时候调用。在初始化渲染的时候,该方法不会调用。
      shouldComponentUpdate:

        在接收到新的 props 或者 state,将要渲染之前调用。该方法在初始化渲染的时候不会调用,在使用 forceUpdate 方法的时候也不会。

    如果确定新的 props 和 state 不会导致组件更新,则此处应该 返回 false
      componentWillUpdate:

        在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
      componentDidUpdate:

        在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。

      componentWillUnmount:

        在组件从 DOM 中移除的时候立刻被调用。

  • 相关阅读:
    java设计模式概述
    Filter
    hello1 hello2 代码分析
    计划
    页面生命周期1
    Jquery
    关于DropDownList
    页面生命周期
    随机生成验证码
    关于技术
  • 原文地址:https://www.cnblogs.com/sunshq/p/5038950.html
Copyright © 2020-2023  润新知