23.react中UI组件，容器组件，无状态组件用法和区别

import React, { Component } from 'react'

import 'antd/dist/antd.css'

import { Input, Button, List } from 'antd'

//无状态组件 没有生命周期，本身只是一个函数，效率比UI组建高，只有一个render方法时可以考虑使用无状态组件

const TodolistUI = (props)=>{

return (

<div style={{ height: '500px', marginTop: '10px' }}>

<div style={{ display: 'flex', justifyContent: "center", color: 'green', alignContent: 'center' }}>

<Input value={props.inputValue} placeholder='todoinfo' size="large" style={{ width: '30%' }}

onChange={(e) => { props.handleClick(e) }}></Input>

<Button type="primary" style={{ height: '40px', marginLeft: '10px' }}

onClick={() => { props.submit() }}>提交</Button>

</div>

<div style={{ display: 'flex', justifyContent: "center", marginTop: '10px' }}>

<List

style={{ width: '35%' }}

size="default"

bordered

dataSource={props.list}

renderItem={(item, index) => (<List.Item

onClick={() => { props.deleteItem(index) }}

>{item}</List.Item>)}

/>

</div>

</div>

 

)

}

export default TodolistUI

//UI组件

class TodolistUI extends Component {

constructor(props) {

super(props);

}

 

render() {

// const {}

return (

<div style={{ height: '500px', marginTop: '10px' }}>

<div style={{ display: 'flex', justifyContent: "center", color: 'green', alignContent: 'center' }}>

<Input value={this.props.inputValue} placeholder='todoinfo' size="large" style={{ width: '30%' }}

onChange={(e) => { this.props.handleClick(e) }}></Input>

<Button type="primary" style={{ height: '40px', marginLeft: '10px' }}

onClick={() => { this.props.submit() }}>提交</Button>

</div>

<div style={{ display: 'flex', justifyContent: "center", marginTop: '10px' }}>

<List

style={{ width: '35%' }}

size="default"

bordered

dataSource={this.props.list}

renderItem={(item, index) => (<List.Item

onClick={() => { this.props.deleteItem(index) }}

>{item}</List.Item>)}

/>

</div>

</div>

 

);

}

 

}

export default TodolistUI

 

 

import React, { Component } from 'react'

import 'antd/dist/antd.css'

import store from './store/store.js'

import { addItem, getNewInput, deleteItem } from './action/todolist.js'

import TodolistUI from './todolistUI.js'

 

//容器组件

class Todolist extends Component {

constructor(props) {

super(props);

this.state = store.getState()

//监听 订阅store数据变化 一旦变化则触发方法将组建的state更新

store.subscribe(() => { this.handleChange() })

}

 

render() {

console.log(store.getState())

return (

<TodolistUI

inputValue={this.state.inputValue}

list={this.state.list}

handleClick={this.handleClick}

submit={this.submit}

deleteItem={this.deleteItem}

>

</TodolistUI>

 

);

}

//不是箭头函数的时候 方法传给子类需要在头部将this绑定到父组件 this.handleClick= thi.handleClick.bind(this)

handleClick = (e) => {

store.dispatch(getNewInput(e.target.value))

}

 

handleChange = (e) => {

this.setState(() => store.getState())

}

 

submit = () => {

store.dispatch(addItem())

}

 

deleteItem = (index) => {

store.dispatch(deleteItem(index))

}

}

export default Todolist