微信小程序 vs React对比总结

发表于 | | 阅读次数

微信小程序 vs React对比总结

微信小程序

文件类型

wxml - html
wxss - css
js - javascript
json - 配置

组件化概念

template - 模板
component - 组件化

数据相关：

App globalData
page data, setData
storage 持久化保存数据

React

文件类型
js
jsx
css

组件概念，用于构建前端UI组件 Component

render 页面渲染方法
props 属性（数据/方法 传递）
state 状态（数据）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// state 初始化
    state = {
        data: []
    }
    
 // state 获取  
    let { data } = this.state
    
// state 更新
    this.setState({
        data: []
    })
    
    this.setState({
        items: [...this.state.items, newItem]  // ...语法糖：展开对象/数组
    })

组件定义

1
2
3
4
5
6
7
8
9
10
11
12
# Table.jsx
export class App extends Component {
    render() { // 渲染
        let items = this.props.items //  获取props  this.props
        return ( //渲染返回内容 , return中只能有一个父元素。
            <div>
                
            </div>
        )
    }
}
export default App

import 引用：

1
2
3
4
5
6
7
8
9
10
import Table from './Table'
class App extends Component {
    render() {
        return (
            <div>
                <Table items={items} removeItem={this.removeItem}/>
            </div>
        )
    }
}

state状态管理器:Redux