本節知識點
- (1) 無狀態組件和有狀態組件的區別
- (2) 無狀態組件的使用
(一)無狀態組件和有狀態組件的區別
(1)傳統組件都會有鉤子函數，生命周期函數等等比如
import React, { Component } from 'react'
import store from './store/index'
import * as actions from './store/actions'
import Listdo from './Listdo'
class App extends Component {
constructor(props) {
super(props)
this.state = store.getState()
store.subscribe(this.changeStore.bind(this))
}
render() {
return (
<Listdo
message={this.state.message}
list={this.state.list}
changeValue={this.changeValue.bind(this)}
changeStore={this.changeStore.bind(this)}
changelist={this.changelist.bind(this)}
deleteone={this.deleteone.bind(this)}
/>
)
}
componentDidMount() {
store.dispatch(actions.get_data())
}
changeValue(e) {
let value = e.target.value
store.dispatch(actions.change_value(value))
}
changelist() {
store.dispatch(actions.change_list())
}
changeStore() {
this.setState(store.getState())
}
deleteone(index) {
store.dispatch(actions.delete_one(index))
}
}
export default App
(2) 而無狀態組件沒有這些，因為里面沒有邏輯沒有方法只有UI展示,所以他不用繼承那些個類,只是暴露個方法即可
方法傳遞都需要通過props
import React, { Fragment } from 'react'
const Todolist = props => {
return (
<Fragment>
<input type="text" value={props.message} onChange={props.changeValue} />
<button onClick={props.changelist}>提交</button>
<ul>
{props.list.map((item, index) => {
return (
<li
key={index}
onClick={() => {
props.deleteone(index)
}}
>
<span>第{index}個+++</span>
<span>{item}</span>
</li>
)
})}
</ul>
</Fragment>
)
}
export default Todolist
