美文网首页
React组件的定义方式

React组件的定义方式

作者: 追风的云月 | 来源:发表于2017-10-25 22:00 被阅读0次

定义组件的时候,一开始就得导入react,不然会引起如下错误:

React must be in scope when using JSX

这是因为JSX最终会被转译成为依赖于React的表达式

一. React创建组件有三种方式

1.无状态组件
function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

官方对其声明如下:

在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他组件等;这种通过多个简单然后合并成一个大应用的设计模式被提倡。

1.组件不会被实例化,整体渲染性能得到提升
因为组件被精简成一个render方法的函数来实现的,由于是无状态组件,所以无状态组件就不会在有组件实例化的过程,无实例化过程也就不需要分配多余的内存,从而性能得到一定的提升。
2.组件不能访问this对象
无状态组件由于没有实例化过程,所以无法访问组件this中的对象,例如:this.ref、this.state等均不能访问。若想访问就不能使用这种形式来创建组件
3.组件无法访问生命周期的方法
因为无状态组件是不需要组件生命周期管理和状态管理,所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
4.无状态组件只能访问输入的props,同样的props会得到同样的渲染结果,不会有副作用

2.React.createClass

这种创建方式在现在已经被淘汰,所以不做过多介绍

3.React.Component
class App extends React.Component {  
  constructor(props) {
    super(props);
    this.state = {
        value:0
    }
  render() {
    return (
      <div></div>
    );
  }

补充:


image.png

相关文章

  • React创建组件

    一、 React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,...

  • React创建组件的三种方式及其区别

    React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同...

  • 无标题文章

    React创建组件的三种方式及其区别 React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同...

  • Component和PureComponent

    React.Component 1 .使用ES6 classes方式定义React 组件2 .不要创建自己的组件基...

  • 初识React

    定义组件的两种方式 函数定义 类定义 使用React时,值得注意的点: 所有的React组件必须像纯函数那样使用它...

  • React组件名大小写

    React组件介绍 React中,组件是可分为函数组件和类组件,不管哪种方式定义的组件,其组件名都必须是大写 大小...

  • 07-02-React 类组件

    目标 掌握类组件的定义和使用; 掌握 React 组件间通信的方式; 掌握类组件的生命周期。 内容 在 React...

  • React 如何区别class和function?

    React定义组件的方式有两种,class和function。如下: 函数式定义: class方式定义: 当我们需...

  • React创建组件的三种方式

    React常见的三种组件创建方式,具体如下: 1.函数式定义的无状态组件 2.es5原生方式React.creat...

  • React创建组件的三种方式

    React推出后,出于不同的原因先后出现三种定义react组件的方式。 具体的三种方式: (1)函数式定义的无状态...

网友评论

      本文标题:React组件的定义方式

      本文链接:https://www.haomeiwen.com/subject/ehicpxtx.html