JS问题整理与思考--react 对组件化对理解

组件化有两大优势

  • 1.组件对封装
  • 2.组件对复用

组件对封装

  • 视图
  • 数据
  • 变化逻辑(数据驱动视图变化)

this.state -->数据;div--》视图;setState--》变化逻辑

import React,{Component} from 'react'
import Input from './input/index'
import List from './list/index'
class Todo extends Component{
    constructor(props){
        super(props)
        this.state = {
            list:[]
        }
    }
    render () {
        return (
            <div>
                <Input addTitle={this.addTitle.bind(this)}/>
                <List data={this.state.list} />
            </div>
        )
    }
    addTitle(title) {
        const currentList = this.state.list
        this.setState({
            list: currentList.concat(title)
        })
    }

}
export default Todo

组件对复用

封装对list组件,可以复用

import React,{Component} from 'react'
import Input from './input/index'
import List from './list/index'

class Todo extends Component{
    constructor(props){
        super(props)
        this.state = {
            list:[]
        }
    }
    render () {
        return (
            <div>
                <Input addTitle={this.addTitle.bind(this)}/>
                <List data={this.state.list} />
                <List data={[1,2,3]} />
                <List data={['aaa','vvv','ccc']} />
            </div>
        )
    }
    addTitle(title) {
        const currentList = this.state.list
        this.setState({
            list: currentList.concat(title)
        })
    }

}
export default Todo

问题整理

  • 组件对封装:封装视图/数据/变化逻辑
  • 组件对复用:props传递/复用。

随机浏览