当前位置:首页 > 开发 > 行业应用 > 正文

React一个完整组件的定义以及绑定事件的优化

发表于: 2016-08-29   作者:qiaolevip   来源:转载   浏览:
摘要:  //文件命名:switchBtn.jsx(以项目命名规则为准) //导入所需字段 importReact,{Component,PropTypes}from'react'; //声明组件名称以及继承关系 classSwitchBtnextendsComponent{ //构建函数,继承父类 constructor(props){ super(props); //定

 

// 文件命名:switchBtn.jsx (以项目命名规则为准)

// 导入所需字段
import React, { Component, PropTypes } from 'react';

// 声明组件名称以及继承关系
class SwitchBtn extends Component {

  // 构建函数,继承父类
  constructor(props) {
    super(props);
     
    // 定义state属性
    /*
     请慎用setState,因其容易导致重新渲染
     既然将数据主要交给了Redux来管理,那就尽量使用Redux管理你的数据和状态state,
     除了少数情况外,别忘了shouldComponentUpdate也需要比较state。
    */
    this.state = {
      isChecked: props.isChecked
    };

    // 请将方法的bind一律置于constructor

    /* Component的render里不动态bind方法,方法都在constructor里bind好,如果要动态传参,方法可使用闭包返回一个最终可执行函数。如:showDelBtn(item) { return (e) => {}; }。如果每次都在render里面的jsx去bind这个方法,每次都要绑定会消耗性能。*/

    this.onChange = this.onChange.bind(this);
  }

  // 内部所需事件
  onChange() {
    console.log(this);
    this.setState({
      isChecked: !this.state.isChecked
    });
  }

  // 渲染函数
  render() {
    const { isChecked } = this.state;
    const { id, onClick } = this.props;

    return (
      <div className="switch-btn">
        <input id={id} type="checkbox" className="switch-checkbox" checked={isChecked} onChange={this.onChange} />
        <label className="switch-label" htmlFor={id} />
      </div>
    )
  }
}

// 定义传参默认值
SwitchBtn.defaultProps = {
  id: 'switchBtn',
  isChecked: true
};

// 定义传参类型
/*
请只传递component需要的props

传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,也请慎用spread attributes()。
*/
SwitchBtn.propTypes = {
  id: PropTypes.string.isRequired,
  isChecked: PropTypes.bool
};

// 导出组件
export default SwitchBtn;


// 关于导入组件
import SwitchBtn from '../components/switchBtn.jsx';

 

 

React一个完整组件的定义以及绑定事件的优化

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听: <!DOCTYPE html>
作为一名开发者,大家应该都知道在浏览器中存在一些内置的控件:Alert,Confirm等,但是这些控件通
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:【
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50635659 本文出自:【
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50615736 本文出自:【
一、ueditor子表控件 如下图: 编辑器中其html代码如下: <tr> <td style="border-width:1
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个
什么是生命周期? 组件本子上是状态机,输入确定,输出一定确定。 状态发生转换时会触发不同的钩子
希望对SEOer有点帮助,高手直接跳过。。。 一个完整的SEO优化方案主要由四个小组组成: 一、前端/页
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http:
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号