zoukankan      html  css  js  c++  java
  • 关于react的一点工作总结

        首先,react是Facebook开发的一套前端框架,仅仅是MVC中的V。核心思想是“封装组件”,组件封装后可以作为一个独立的实体被引入到新的组件中,这样新的组件就又是一个实体了,由于组件的实现了可复用,所以是大大减小了开发的工作量。

    *react的值可以分为私有公有,私有的值一般就用this.state来表示了比如:

    <Input type="password" before={passwordIcon} name="passwordAgain" id="againPassword“onChange={this.handleAgainChange} value={this.state.passwordAgain} error={this.state.error} placeholder="确认密码"/>,

    和这个相关的就是setState了,一般用在事件里面,用来更改数据。

    handleChange(e) {
      this.props.validate(e.target.value);  this.setState({passwordAfter: e.target.value});
    }

    不过这样的话浏览器会报错说setState没有定义,解决方法呢就是要再构造函数里bind一下,像这样:this.handleChange = this.handleChange.bind(this);

    *公有的呢就是props了,props用于父子组件之间的通信,super(props);放在构造函数里就可以把父组件里的属性继承下来了,当需要从父组件继承的时候,使用this.props就可以了,如下:

    handleClick() {
      this.props.onSubmit(this.state.passwordBefore, this.state.passwordAfter, this.state.passwordAgain);
    }

    *react的生命周期基本上就是组件执行的过程了:

    第一步执行的是getInitialState,只在组件装载之前调用一次;

    第二步是getDefaultProps,作用是只在组件创建时调用一次并缓存返回的对象。

    第三步执行的是render,使用原生html标签或者子组件组装生成这个组件的html结构,也可以返回 null 或者 false,这时候 ReactDOM.findDOMNode(this) 会返回 null

    第四步:装载组件触发:componentWillMount 只会在装载之前调用一次,在 render 之前调用,你可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render。componentDidMount 只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

    更新组件触发:(内嵌循环执行的)

    componentWillReceiveProps

    shouldComponentUpdate

    componentWillUpdate

    componentDidUpdate   

    这些组件不会在首次render组件的周期调用。

    最后一步呢是卸载组件触发:componentWillUnmount

    *以上为react的一些基本概念,一些比较好的学习资源跟大家分享一下:

    1入门教程

    2Facebook github上的使用文档,比较全

     

  • 相关阅读:
    MyBatis常见面试题以及解读
    如何防止sql注入攻击
    宝塔Linux面板基础命令
    Centos7配置静态ip
    宝塔Linux面板安装
    idea中安装阿里巴巴的代码规范插件
    idea中快速将类中的属性转为Json字符串的插件
    创建线程的四种方式
    sleep()方法与wait()方法的区别
    解决线程安全的几种方式
  • 原文地址:https://www.cnblogs.com/s-z-y/p/5011072.html
Copyright © 2011-2022 走看看