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上的使用文档,比较全

     

  • 相关阅读:
    LeetCode "Super Ugly Number" !
    LeetCode "Count of Smaller Number After Self"
    LeetCode "Binary Tree Vertical Order"
    LeetCode "Sparse Matrix Multiplication"
    LeetCode "Minimum Height Tree" !!
    HackerRank "The Indian Job"
    HackerRank "Poisonous Plants"
    HackerRank "Kundu and Tree" !!
    LeetCode "Best Time to Buy and Sell Stock with Cooldown" !
    HackerRank "AND xor OR"
  • 原文地址:https://www.cnblogs.com/s-z-y/p/5011072.html
Copyright © 2011-2022 走看看