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

创建组件有两种方法：

注意：用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）

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