React组件定义种类，容器型组件，展示型(UI)组件，受控组件，props和state的区别，setState

本文主要是介绍React组件定义种类，容器型组件，展示型(UI)组件，受控组件，props和state的区别，setState，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

创建组件有两种方法：

注意：用function构造函数创建无状态组件，只有props，无自己的私有数据和生命周期---用的不多；

注意：class关键字创建有状态组件，有自己的私有属性(this.state)和声明周期---用的比较多

有状态组件和无状态组件的本质区别：有无state属性、有无生命周期

类组件（class component）和函数式组件（functional component）的区别

1）当组件只是接受props属性，并将组件自身渲染到页面，用纯函数定义----展示组件

2）类组件---容器型组件，用ES6的class关键字创建，有自身的状态、生命周期钩子。让组件直接访问store，维持状态

什么情况下使用有状态组件？什么情况下使用无状态组件？

1）一个组件需要有自己的私有数据（this.state），推荐使用class创建的有状态组件

2）一个组件不需要有自己的私有数据，推荐使用function创建的无状态组件

声明类组件时，如果有定义自己的属性，必须在组件的constructor()里面调用super(props)的原因

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props

组件中的props和state的区别

a）props是组件的配置，props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props可以包含数据和回调函数

b）state中是一种数据结构，用于组件挂载时所需数据的默认值，state数据都是组件私有的（通过ajax获取回来的数据，一般都是私有数据）；state中的数据可读可写，可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果;

1）只能通过setState()方法修改state的值，不能直接修改state因为这样不会重新渲染组件；

2）this.state必须在constructor中初始化为一个对象；

3）state的更新可能是异步的，所以setState()方法最好用回调函数；

//前一个状态---prevState，更新时的props
this.setState((prevState, props) => ({counter: prevState.counter + props.increment
}));

4）state会被合并，调用setState()的时候，将函数中的参数对象合并到当前组件的状态对象里面

为什么建议传递给setState()方法的参数是一个callback而不是一个object?

react为了优化性能，有可能会将多个 setState() 调用合并为一次更新(如连续多次调用setState方法，间隔短，会将多次合并为一次setState，然后利用diff算法在更新变化的部分，达到性能优化的目的)

this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state

无状态组件

function Person(props){return (<div><p>props.name</p><p>props.age</p></div>);
}// 调用
<Person name="jiang"  age="1"/>

用ES6语法定义React组件----有状态组件

在项目中用到ajax方法，可以在项目的根目录下安装jquery

cnpm install jquery --save-dev

然后在要使用的地方引进jquery

import $ from 'jquery';

这样就可以通过全局对象，使用$对象中的方法了

Comment.js组件的内容

import React,{Component} from 'react';
import './css/Comment.css'
class Comment extends Component{render(){return (<div className='comment'>{/* 需要从父组件哪里获得数据 */}<span className='author'>{this.props.author}</span><div className='metadata'><span className='date'>{this.props.date}</span></div>{/* this.props.children的内容就是CommentList.js中的<Comment>的子节点内容 */}<div className='text'>{this.props.children}</div></div>);}
}
export default Comment;

CommentList.js组件的内容

import React,{Component} from 'react';
import Comment from './Comment';class CommentList extends Component{render(){return (<div>{/* 这里的数据是从服务端获得数据的 */}<Comment author='jiang' date='five minutes ago'>it is a good day!</Comment><Comment author='jiang' date='five minutes ago'>it is a good day!</Comment><Comment author='jiang' date='five minutes ago'>it is a good day!</Comment><Comment author='jiang' date='five minutes ago'>it is a good day!</Comment></div>);}
}export default CommentList;

以上是书写静态页面的内容，是为了将静态页面的样式给调出来。

下面，是模拟服务器传送回来的数据，一般获取服务器的数据请求是在App.js，在App.js下面书写模拟的数据

App.js中用一个数据json格式模拟数据

import React, { Component } from 'react';
import CommentBox from './comment/CommentBox';
import {Container} from 'semantic-ui-react';
import 'semantic-ui-cssmantic.min.css';// 模拟数据
const comments = [{'author':'jiang','date':'five minutes ago','text':'it is a good weather'},{'author':'ke','date':'three minutes ago','text':'i am happy'},
];class App extends Component {render() {return (<Container style={{padding: '10px'}}>{/* 传递数据给子组件 */}<CommentBox data={comments}/></Container>);}
}export default App;

在CommentBox中接受从父组件App.js中传递归来的数据data属性

import React,{Component} from 'react';
import {Divider} from 'semantic-ui-react';
import CommentList from './CommonList';
import CommenForm from './CommentForm';class CommentBox extends Component{render(){return (<div><h2>评论</h2><Divider />{/* 从父组件接收数据，这里又充当父组件然后传递数据给子组件 */}<CommentList data={this.props.data}/><CommenForm /></div>);}a
}
export default CommentBox;

在组件CommentList.js中接收到从父组件中传递过来的数据

import React,{Component} from 'react';
import Comment from './Comment';
class CommentList extends Component{render(){// 循环处理接收到从父组件中传递的数据const commentNodes = this.props.data.map(comment => {return (<Comment author={comment.author} date={comment.date} key={comment.text}>{comment.text}</Comment>);});return (<div>{/* 这里的数据是从服务端获得数据的 */}{commentNodes}</div>);}
}
export default CommentList；

state属性是用于用户和UI进行交互的，也就是内容可以更改，是组件内部私有的属性,this.state初始化的时候是一个对象，然后通过this.setState()方法进行更改相应的state属性的值；从服务器得到数据，那么使用state属性存储从服务器传回来的数据，因为这个数据可能会变，所以用state来保存

父组件传递数据给子组件或者（子组件向父组件传递数据）使用：this.props

获取在浏览器中显示的元素，在tag中使用ref属性，在js中使用this.refs.[refname]获得在浏览器中显示的ui元素

class CommentForm extends Component{constructor(props){super(props);this.handleSubmit = this.handleSubmit.bind(this);}handleSubmit(event){event.preventDefault();console.log('提交表单');// 在这里获取到相应的UI元素let author = this.refs.author.value,text = this.refs.text.value;console.log(author);console.log(text);}render(){return (<Form onSubmit={this.handleSubmit}><Form.Field><input type='text' placeholder='姓名' ref='author'/></Form.Field><Form.Field>{/* 使用ref属性 */}<textarea placeholder='评论' ref='text'></textarea></Form.Field><Button type='submit' primary size='mini'>添加评论</Button></Form>);}
}

子组件将数据传递给父组件---还是利用this.props属性，在父组件中CommentBox.js定义的函数会有个参数，然后将该函数在父组件中，传递给子组件CommentForm.js，在子组件中调用该方法并传递参数

比如像在表单里面，即组件CommentForm有人提交了评论，需要将评论传递给组件CommentBox，然后追加显示新的评论

父组件CommentBox.js部分代码

//在父组件定义方法
handleCommentSubmit(comment){console.log(comment);
}render(){return (<div><h2>评论</h2><Divider />{/* 从父组件接收数据，这里又充当父组件然后传递数据给子组件 */}<CommentList data={this.state.data}/>{/*在父组件调用子组件，并在子组件定义属性onCommentSubmit*/}<CommenForm onCommentSubmit={this.handleCommentSubmit}/></div>);}

子组件CommentForm.js部分代码

  handleSubmit(event){event.preventDefault();console.log('提交表单');// 在这里获取到相应的UI元素let author = this.refs.author.value,text = this.refs.text.value;console.log(author);console.log(text);//调用从父组件传递过来的函数，并向父组件传递参数this.props.onCommentSubmit({author,text});}<Form onSubmit={this.handleSubmit}>

展示组件（presentational component）和容器组件（container component）的区别

1）展示组件就是UI组件，一般用函数式组件定义，负责DOM的显示，数据通过展示组件传过来，通过props属性接受数据和回调（props属性是只读属性），并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。

2）容器组件用类组件定义，经常是有状态的，是(其它组件的)数据源，负责页面的逻辑，更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件

受控组件（controlled component)

包含表单元素的组件将会在 state 中追踪输入的值，并且每次调用回调函数时，如 onChange 会更新 state，重新渲染组件。

一个输入表单元素，它的值通过 React 的这种方式来控制，这样的元素就被称为"受控元素"。

高阶组件（higher order component）

高阶组件是一个以组件为参数并返回一个新组件的函数