学习react总结知识点

传统HTML中<div onclick="handleclick()"></div>handleclick函数自动绑定了this,而react中<div onClick={handleclick}"></div>需要手动绑定,下面是回调函数绑定this的三种方法


1.bind(this)

constructor(props){

    super(props);

    this.state={};

    this.functionname=this.functionname.bind(this);

}

属性初始化器


functionname(){
    console.log("this is",this);

    //function here...

}

箭头函数


render(){
    return(

        <div onClick={(e)=>(this.function(e))}></div>

    )

}

2.HTML中阻止事件的默认行为可以用return false


<a href="#" onclick="console.log('The link was clicked.'); return false">

  Click me

</a>

而React中只能显示调用e.preventDefault();


function ActionLink() {

  function handleClick(e) {

    e.preventDefault();

    console.log('The link was clicked.');

  }



  return (

    <a href="#" onClick={handleClick}>

      Click me

    </a>

  );

}

组件可以用函数和类定义,但是只有类定义的组件有局部状态和生命周期钩子. this.props 和 this.state 可能是异步更新的,不应该依靠它们的值来计算下一个状态。例如,此代码可能无法更新计数器:


// Wrong

this.setState({

  counter: this.state.counter + this.props.increment,

});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 官网地址https://facebook.github.io/react/docs/hello-world.htm...
    pixels阅读 715评论 0 6
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,719评论 0 5
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,307评论 0 9
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,523评论 1 33
  • 老妈今天带着她的弟弟和我的弟弟去钓鱼,晚上还做了全鱼宴发视频眼气我,哎呀!整个人都不好了。好想吃鱼啊!
    眠花城阅读 258评论 0 2