Question

很抱歉这个假问题，但我真的被困了。

我使用these instructions创建了一个非常简单的react-native应用程序。

然后我将App.js改为

import React from 'react';
import {AppRegistry, Button, View } from 'react-native';

class RootView extends React.Component {    
    state = {
        showFoo: false,
    }

    showFoo = () => {
        this.setState({showFoo: true})

    }

    renderFoo = () => {
        if (this.state.showFoo) {
            console.log("at 4");
            const item  = <View  />;   /// BOOM!
            console.log('at 5', item);
            return item;
        }
        return null;
    }

    render = () => {
        const renderFoo = this.renderFoo();

        return (
            <View>
                    <Button title="Press Me" onPress={this.showFoo} />
            </View>
        );
    }
}

export default RootView;

现在，如果我在Android 6.0.1上使用Expo客户端启动它。然后按“按下我”按钮，它会挂起并且不响应后退按钮。

在adb logcat中，我可以看到“at 4”，但从不“5”。就像它停留在“BOOM！”由于某种原因（死锁？）。

想知道我做错了什么？我再次道歉，但我已经花了相当多的时间在这上面，真的很感激任何线索。另外，我怎么能调试那样的东西？

反应依赖的版本：

"dependencies": {
    "expo": "^27.0.1",
    "react": "16.3.1",
    "react-native": "~0.55.2"
  }
}

（如果您认为问题需要在评论中提供更多详细信息，请与我们联系，我很乐意对其进行更新。）

Answer 1

你应该使用

<Button title="Press Me" onPress={this.showFoo.bind(this)}/>

或使用

<Button title="Press Me" onPres{()=>this.showFoo()}/>

并使用此语法

在render方法中调用this.renderFoo();

{this.renderFoo()}

Answer 2

我已经创建了一个snack来向您展示解决方案。

问题在于您的render方法

render = () => {
    const renderFoo = this.renderFoo();

    return (
        <View>
                <Button title="Press Me" onPress={this.showFoo} />
        </View>
    );
}

具体来说是const renderFoo = this.renderFoo();。对于这行代码，您只需执行renderFoo方法并将其存储到renderFoo变量中，并且它不在返回部分中。换句话说，<View />返回的renderFoo将不会显示在屏幕上。

修复方法是以下代码

render() {
  return (
    <View>
            <Button title="Press Me" onPress={this.showFoo} />
            {this.renderFoo()}
    </View>
  );
}

Answer 3

最后，经过数小时的调查......

看来，问题出在这一行：

 console.log('at 5', item);

它实际上没有卡住。如果我等了5秒钟，应用程序继续进行。似乎记录反应组件是一项非常昂贵的操作。

当我尝试记录一些lambda函数时，我遇到了同样的问题。

TLDR：不记录复杂对象!!!!

React native for android run very slow when not enable "Debug JS"

https://facebook.github.io/react-native/docs/performance.html#using-consolelog-statements

当我创建子组件时，React Native挂起

3 个答案: