taro显示html,taro和react之间有什么区别？

taro和react之间有什么区别&＃xff1f;下面本篇文章就来给大家介绍一下。有一定的参考价值&＃xff0c;有需要的朋友可以参考一下&＃xff0c;希望对大家有所帮助。

Taro 与 React 的差异(转自小册)

由于微信小程序的限制&＃xff0c;React 中某些写法和特性在 Taro 中还未能实现&＃xff0c;后续将会逐渐完善。 截止到本小册发布前&＃xff0c;Taro 的最新版本为 1.1&＃xff0c;因此以下讲解默认版本为 1.1。

暂不支持在 render() 之外的方法定义 JSX

由于微信小程序的 template 不能动态传值和传入函数&＃xff0c;Taro 暂时也没办法支持在类方法中定义 JSX。

无效情况class App extends Component {

_render() {

return

}

}

class App extends Component {

renderHeader(showHeader) {

return showHeader &&

}

}

class App extends Component {

renderHeader &＃61; (showHeader) &＃61;> {

return showHeader& &

}

}

解决方案

在 render 方法中定义。class App extends Component {

render () {

const { showHeader, showMain } &＃61; this.state

const header &＃61; showHeader &&

const main &＃61; showMain &&

return (

{header}

{main}

)

}

}

不能在包含 JSX 元素的 map 循环中使用 if 表达式

无效情况numbers.map((number) &＃61;> {

let element &＃61; null

const isOdd &＃61; number % 2

if (isOdd) {

element &＃61;

}

return element

})

numbers.map((number) &＃61;> {

let isOdd &＃61; false

if (number % 2) {

isOdd &＃61; true

}

return isOdd &&

})

解决方案

尽量在 map 循环中使用条件表达式或逻辑表达式。numbers.map((number) &＃61;> {

const isOdd &＃61; number % 2

return isOdd ? : null

})

numbers.map((number) &＃61;> {

const isOdd &＃61; number % 2

return isOdd &&

})

不能使用 Array.map 之外的方法操作 JSX 数组

Taro 在小程序端实际上把 JSX 转换成了字符串模板&＃xff0c;而一个原生 JSX 表达式实际上是一个 React/Nerv 元素(react - element)的构造器&＃xff0c;因此在原生 JSX 中你可以对任何一组 React 元素进行操作。但在 Taro 中你只能使用 map 方法&＃xff0c;Taro 转换成小程序中 wx:for。

无效情况test.push()

numbers.forEach(numbers &＃61;> {

if (someCase) {

a &＃61;

}

})

test.shift()

components.find(component &＃61;> {

return component &＃61;&＃61;&＃61;

})

components.some(component &＃61;> component.constructor.__proto__ &＃61;&＃61;&＃61; .constructor)

numbers.filter(Boolean).map((number) &＃61;> {

const element &＃61;

return

})

解决方案

先处理好需要遍历的数组&＃xff0c;然后再用处理好的数组调用 map 方法。numbers.filter(isOdd).map((number) &＃61;> )

for (let index &＃61; 0; index

// do you thing with array

}

const element &＃61; array.map(item &＃61;> {

return

})

不能在 JSX 参数中使用匿名函数

无效情况 this.handleClick()} />

this.handleClick(e)} />

({})} />

解决方案

使用 bind 或 类参数绑定函数。

不能在 JSX 参数中使用对象展开符

微信小程序组件要求每一个传入组件的参数都必须预先设定好&＃xff0c;而对象展开符则是动态传入不固定数量的参数。所以 Taro 没有办法支持该功能。

无效情况

解决方案

开发者自行赋值&＃xff1a;render () {

const { id, title } &＃61; obj

return

}

不允许在 JSX 参数(props)中传入 JSX 元素

由于微信小程序内置的组件化的系统不能通过属性(props) 传函数&＃xff0c;而 props 传递函数可以说是 React 体系的根基之一&＃xff0c;我们只能自己实现一套组件化系统。而自制的组件化系统不能使用内置组件化的 slot 功能。两权相害取其轻&＃xff0c;我们暂时只能不支持该功能。

无效情况} />

} />

}} />

)} />

解决方案

通过 props 传值在 JSX 模板中预先判定显示内容&＃xff0c;或通过 props.children 来嵌套子组件。

不支持无状态组件(Stateless Component)

由于微信的 template 能力有限&＃xff0c;不支持动态传值和函数&＃xff0c;Taro 暂时只支持一个文件只定义一个组件。为了避免开发者疑惑&＃xff0c;暂时不支持定义 Stateless Component。

无效情况function Test () {

return

}

function Test (ary) {

return ary.map(() &＃61;> )

}

const Test &＃61; () &＃61;> {

return

}

const Test &＃61; function () {

return

}

解决方案

使用 class 定义组件。class App extends Component {

render () {

return (

)

}

}

命名规范

Taro 函数命名使用驼峰命名法&＃xff0c;如onClick&＃xff0c;由于微信小程序的 WXML 不支持传递函数&＃xff0c;函数名编译后会以字符串的形式绑定在 WXML 上&＃xff0c;囿于 WXML 的限制&＃xff0c;函数名有三项限制&＃xff1a;方法名不能含有数字

方法名不能以下划线开头或结尾

方法名的长度不能大于 20

请遵守以上规则&＃xff0c;否则编译后的代码在微信小程序中会报以下错误&＃xff1a;

更多web前端开发知识&＃xff0c;请查阅 HTML中文网 &＃xff01;&＃xff01;