ReactJS是基于组件化的开发。
那么有些朋友会有疑问，组件是什么？
所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。
在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。
React认为一个组件应该具有以下特征：
- 可组合（Composeable）：一个组件易于和其他组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件用于(own)他创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；
- 可重用(Reusable):每个组件都是具有独立功能的，它可以被使用在多个UI场景；
- 可维护(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是基于组件化的开发，组件化开发最大的优点就是复用。
- ReactJS是基于组件化的开发，所以最终界面应该是由若干个小组件组成的大组件。
- 可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件；要对某些值的变化做DOM操作的，要把这些值放到state中。
- 组件添加外部css样式时，类名应该写成className而不是class；添加内部样式时，应该是style={{opacity:this.state.opacity}}而不是style=“opacity:{this.state.opacity};”。
- 组件名称首字母必须大写。
- 变量名用{}包裹，且不能加双引号。
以上就是react组件是什么意思？的详细内容，更多请关注其它相关文章！
