react组件是什么意思?

ReactJS是基于组件化的开发。

那么有些朋友会有疑问,组件是什么?

所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

如果说MVC的思想让你做到视图-数据-控制器的分离,那么组件化的思考方式则是带来了UI功能模块之间的分离。

在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

React认为一个组件应该具有以下特征:

  1. 可组合(Composeable):一个组件易于和其他组件一起使用,或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件,那么说父组件用于(own)他创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;
  2. 可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;
  3. 可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;

React允许将代码封装成组件(Component),然后像插入普通HTML标签一样,在网页中插入这个组件。React.createClass方法就用于生成一个组件类。

  在组件传值可以通过属性传输,在接收的时候通过this.props.属性获取。需要注意的点:

  • 获取属性的值用的是this.props.属性名
  • 创建的组件名称首字母必须大写。
  • 为元素添加css的class时,要用className。
  • 组件的style属性的设置方式也值得注意,要写成style={{width:this.state.width}} 第一个花括号是代表要写js了,第二个花括号是一个对象。

组件状态:

组件免不了要与用户互动,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI。

getInitialState,这个函数在组件初始化的时候执行,必须返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值。当要修改属性值时,要使用setState方法。(如果是类组件的话就用constructor里面)

原理分析:

当用户点击组件,导致状态变化,this.setState方法就修改状态值,每次修改以后,自动调用this.render方法,再次渲染组件。

这里值得注意的几点如下:

1. getInitialState函数必须有返回值,可以是NULL或者一个对象
2. 访问state的方法是this.state.属性名。
3. 变量用{}包裹,不需要再加双引号。

组件的嵌套:

  React是基于组件化的开发,组件化开发最大的优点就是复用。

  1. ReactJS是基于组件化的开发,所以最终界面应该是由若干个小组件组成的大组件。
  2. 可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件;要对某些值的变化做DOM操作的,要把这些值放到state中。
  3. 组件添加外部css样式时,类名应该写成className而不是class;添加内部样式时,应该是style={{opacity:this.state.opacity}}而不是style=“opacity:{this.state.opacity};”。
  4. 组件名称首字母必须大写。
  5. 变量名用{}包裹,且不能加双引号。

以上就是react组件是什么意思?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1