React Native 知识点

1. RN 中组件的生命周期

 

2. RN 组件中的 key 起什么作用

同父级的子级元素中间添加一个子元素，如果不加key，会先移除再append剩下的子元素；加key 通过key对比知道只是增加一个元素，会指向insert操作，这样减少dom操作的性能开销。

浅谈ReactJS中key的作用

 

3. ReactJS 父子组件 兄弟组件如何通信

父组件向子组件通信：父组件通过向子组件传递 props，子组件this.props获取

子组件向父组件通信：父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数

跨级组件通信(就是父组件向子组件的子组件通信)：a.中间组件层层传递 props；b.使用 context 对象

非嵌套组件通信：a.利用二者共同父组件的 context 对象进行通信；b.使用自定义事件的方式

React 中组件间通信的几种方式

 

4. rgba()和opacity实现透明效果的区别

opacity作用于元素，以及元素内的所有内容的透明度；

rgba()只作用于元素的颜色或其背景色。

 

5. null 和 undefined 的区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，可认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。

null与undefined的区别? - 圣墨 - 博客园

6. RN WebView onMessage多执行了一次

<WebView
  style={{width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center'}}
  source={{uri: 'http://www.baidu.com'}}
  onLoadEnd={(e) => {
    this.setState({ animating: false })
  }}
  onMessage={e => this.onMessage(e)}
  javaScriptEnabled
  renderError={(e) => <View />}
/>

style={{ marginTop: 0 }} 就只会执行一次，原因暂时未知

7.RN 尺寸测量

const onLayout = (e) => {
        const {x,y,width,height} = e.nativeEvent.layout
        console.log('measureWidth =>', width)
    }
    return (
        <View
            onLayout={onLayout}
            style={styles.content}>
            ...
        </View>
    )