@Author：Runsen

React，也有了自己去构建一些应用的信心，那会是一种非常棒的感觉。

容器组件和无状态组件

React类组件是在JavaScript ES6时引入的，因为直到ES6才支持JS类。有时候它们也被称为React ES6类组件。

在上次的TodoList示例中，render函数是、渲染一个组件，而这个组件叫做UI组件。

新建TodoListUI.js，来做无状态组件

有状态组件其实就是一个类，也叫容器组件，而无状态组件是一个函数

// 有状态组件
class App extends Component { render() { return (......); }
}
export default App;

// 无状态组件
const person = (props) => { return (......)
}
export default person

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

从上面定义我们看到的明显区别是：有状态组件其实就是一个类，而无状态组件是一个函数。

从数据管理和存储来看:有状态组件可以使用State ,而无状态组件不能使用state，而是使用props来接收数据。

TodoListUI.js

import React from 'react'
import { Input,Button, List  } from 'antd';

// const无状态组件 父项子传参数 需要props 
const TodoListUI = (props)=> {
  return ( <div> <div> <Input value={props.inputValue} placeholder="Todo info" style={{width:'300px',marginRight:'10px' }} onChange={props.handleInputChange}></Input> <Button type="primary" onClick={props.handleBtnClick}>提交</Button> </div> <List bordered style={{width:'300px',marginTop:'10px' }} dataSource={props.list} renderItem={(item, index) => (<List.Item onClick={()=>{props.handleItemDelete(index)}}>{item}</List.Item>)} /> </div>
  ) }
export default TodoListUI;
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
 

使用JavaScript类编写的React Component有个类似于类构造器的方法，主要用于让React设置初始状态，或者绑定方法。还有必须的render方法用于返回JSX的输出。

TodoList.js

import React, {Component } from 'react'
import 'antd/dist/antd.css'
import store from './store';
import TodoListUi from './TodoListUI';
import { getInitList, getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'
class TodoList extends Component {
  constructor(props) { super(props) this.state = store.getState() this.handleInputChange = this.handleInputChange.bind(this) this.handleStoreChange = this.handleStoreChange.bind(this) this.handleBtnClick = this.handleBtnClick.bind(this) this.handleItemDelete = this.handleItemDelete.bind(this) store.subscribe(this.handleStoreChange) console.log( this.state)
  } render() { return  <TodoListUi inputValue={this.state.inputValue} handleInputChange={this.handleInputChange} handleBtnClick={this.handleBtnClick} handleItemDelete={this.handleItemDelete} list={this.state.list} />
  } componentDidMount() {
		const action = getInitList();
		store.dispatch(action);
	}

	handleInputChange(e) {
		const action = getInputChangeAction(e.target.value);
		store.dispatch(action);
	}

	handleStoreChange() {
		this.setState(store.getState());
	}

	handleBtnClick() {
		const action = getAddItemAction();
		store.dispatch(action);
	}

	handleItemDelete(index) {
		const action = getDeleteItemAction(index);
		store.dispatch(action);
	}
}

export default TodoList;
  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
 

在实际开发中，建议更多的使用无状态组件，因为有状态组件带有生命周期函数，会在不同时刻触发更新。所以更多的使用无状态组件可以提高整体的渲染性能。

文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。

原文链接：maoli.blog.csdn.net/article/details/109880113