React学习--基础部分(一)

1.props

const element = <Welcome name="Sara" />

如果用户自定义了一个组件Welcome,可以传递他的jsx属性,我们把类似于name的属性叫做props.

2.state

不能直接修改state的值

同时更新几个值,state更新可能是异步的,一般这样写:

// Wrong
this.setState({
      counter: this.state.counter + this.props.increment,
        });
        
    // Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

3.自定义组件

通常自定义组件以大写开头.

如果一个组件被多次调用,可以将它抽象为一个函数,返回该组件

4.事件

阻止默认事件:e.preventDefault()

点击事件时需要bind

 If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
 if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.         

如果不习惯该用法,可以使用箭头函数

 <button onClick={(e) => this.handleClick(e)}>Click me
</button>

上面这种语法的问题是每次LoggingButton呈现时都会创建一个不同的回调。在大多数情况下,这是很好的。但是,如果将此回调传递给较低的组件,则这些组件可能会执行额外的重呈现。我们通常建议在构造函数中绑定或使用类字段语法,以避免这种性能问题。

点击事件传递参数

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 12,460评论 2 35
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 12,309评论 14 128
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 11,409评论 0 9
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 12,565评论 2 21
  • 我烦 不开心 生气 狂躁 要发怒 要抓狂 要咆哮 要嘶吼 要裸奔 要满地打滚 要见谁咬谁
    东野小妞子阅读 1,586评论 0 1