Learning World

Posted 2021-03-25 dajunjun

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

2. 不能在Array.map 之外的方法中操作 JSX 数组

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

4.不支持在render() 之外的方法中定义JSX

所有的JSX定义，都要写在 render()中

> render(){ > const header = <View><Text>Header</Text></View>; > const {showHeader} = this.state > > return ( > <View> > { > showHeader&&header > } > <View> > <Text>Body</Text> > </View> > </View> > ) > } >

5. 不要再JSX的参数(props)中使用对象展开操作符

6. 不支持无状态组件

7.自定义组件样式不能受外部样式影响

即不要给自定义组件添加 className 或者 style 属性以期望控制自定义组件的展示

8.给自定义的组件设置 defaultProps 和 propTypes

class extends Component { render(){ return ( <h1> Hello, {this.props.name}</h1> ); } } CustomComponent.propTypes = { name: PropTypes.String }; CustomComponent.defaultProps = { name: null };

####9.组件传递函数属性以 on 开头

Class Parent extends Component { handleEvent(){ } render(){ return( <CustomChild onTrigger={this.handleEvent.bind(this)} renderHeader={<JSX ></JS>} > </CustomChild> ) } }

10.不要在组件中打印传入的函数

11.不要将在模板中用到的数据设置为 undefined

如果某个数据不使用了，可以设置成 null

12.不要在组件中打印 this.props.chidren

13. props中可以传入JSX

大专栏  Learning World

组件传入的JSX的属性名必须以 render 开头

14. 属性值不能以 id，class，style 为名称

15. state 和 props 的字段不能重名

16.生命周期差异

— 在componentWillMount() 中即 onLoad 的时候才能拿到路由

— 子组件的 constructor 和 render 初始化时会被提前调用一次

17. JS编码必须使用单引号

18. 环境变量需要直接使用 process.env

19. 页面跳转时，在 componentWillMount() 前可以通过预加载拿到参数进行页面请求

> class Index extends Component{ > > > componentWillPreload(params) { > // Step 2. > return this.fetchData(params.url) > } > > // Method Define > fetchData () { > this.isFetching = true > > } > > // Step 3. > componentWillMount(){ > console.log('is Fetching: ', this.isFetching) > this.$preloadData > .then( res => { > console.log( 'res', res) > this.isFetching = false > }) > } > } >

1. 通过componentWillPreload接收页面跳转参数作为参数;
2. 在componentWillPreload 中通过 return 将需要加载的内容返回;
3. 在页面中触发 componentWillMount, 然后通过 this.$preloadData 获取到预加载的内容，然后再处理数据;

20. 使用this.$preload 函数进行页面跳转传参数

使用 this.$preload 可以传入单个参数也可以传入多个参数

this.$preload('key', 'val') Taro.navigateTo({ url: '/pages/B/B'}) componentWillMount(){ console.log('preload: ', this.$router.preload.key) }

this.$preload({ x: 1, y: 2 }) Taro.navigateTo({ url: '/pages/B/B'}) componentWillMount(){ console.log('preload:', this.$router.preload) }

21. 使用PurComponent减少不必要的渲染

class Home extends Taro.PureComponent { }