React-native是否不应该仅渲染类似于React工作方式的更改组件？

Question

I am new to the React scene but I am fairly familiar with its structure and at the very least how to make simple webapps using it but this got me scratching my head for hours

I am making a Tic Tac Toe using React-native, I currently experiment only on Android. These are the parts from my code that I think explains my situation

import Tile from "./Tile"

export default class Playground extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            board: [["?", "?", "?"], ["?", "?", "?"], ["?", "?", "?"]],
            turn: "X"
        }
    }

    move(x, y) {
        if (this.state.board[x][y] == "?") {
            var currentTurn = this.state.turn
            var currentBoard = this.state.board
            currentBoard[x][y] = this.state.turn
            this.setState({board: currentBoard});
            //this.isGameOver(x, y);
        }
    }

    isGameOver(x, y) {
        //Game Over Test
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.row}>
                    <Tile onPress={this.move.bind(this, 0, 0)} icon={this.state.board[0][0]}/>
                    <Tile onPress={this.move.bind(this, 0, 1)} icon={this.state.board[0][1]}/>
                    <Tile onPress={this.move.bind(this, 0, 2)} icon={this.state.board[0][2]}/>
                </View>
                <View style={styles.row}>
                    <Tile onPress={this.move.bind(this, 1, 0)} icon={this.state.board[1][0]}/>
                    <Tile onPress={this.move.bind(this, 1, 1)} icon={this.state.board[1][1]}/>
                    <Tile onPress={this.move.bind(this, 1, 2)} icon={this.state.board[1][2]}/>
                </View>
                <View style={styles.row}>
                    <Tile onPress={this.move.bind(this, 2, 0)} icon={this.state.board[2][0]}/>
                    <Tile onPress={this.move.bind(this, 2, 1)} icon={this.state.board[2][1]}/>
                    <Tile onPress={this.move.bind(this, 2, 2)} icon={this.state.board[2][2]}/>
                </View>
            </View>
        )
    }
}

And of course the code for the tiles

export default class Tile extends React.Component {
    constructor(props) {
        super(props)
    }

    rand() {
        return Math.random() * 256;
    }

    randColor() {
        return "rgb(" + this.rand() + " ," + this.rand() + " ," + this.rand() + ")";
    }

    determineIcon() {
        if (this.props.icon == "X") {
            return (<Text>O</Text>)
        } else if (this.props.icon == "O") {
            return (<Text>X</Text>)
        } else {
            return null;
        }
    }

    render() {
        console.log("Things are happening!")
        return (
            <TouchableHighlight onPress={this.props.onPress} underlayColor={this.randColor()}>
                <View style={[styles.square, {backgroundColor: this.randColor()}]}>
                    {this.determineIcon()}
                </View>
            </TouchableHighlight>
        )
    }
}

So what I noticed at first was that every time I clicked on a tile and it was successfully changed to an X ALL colours were regenerated again which made me realise that my app is re-rendering everything.

So I thought it was the fault of that random function and decided to have all squares be orange, but I wanted to know whether it was still re-rendering everything or just the tile I pressed, so I put that console log to see how many times is the rendering happening and to my dismay it happened 9 times.

I ended up removing the the onPress and icon properties from the 8 last tiles and turning them into completely static objects and changing board into a simple Boolean that I passed to the first tile. But no, it still rendered all 9 elements, again!

Can someone please explain to me, Shouldn't React-native render only changed components similar to how React works?

Answer 1

Recently I've learned that when a new state is being set (or when props are changed), all your components in the hierarchy for this parent component will trigger the render function. This is true for React and not specific to React-Native ; it happens because React's shouldComponentUpdate() defaults to true .

This doesn't mean that the components are actually getting re-rendered again . React is smart enough to figure out if it needs to update the UI or not as part of a process called "Reconciliation".

That said, if you have lots of components with a deep hierarchy, this behavior might put some stress on the JS thread. If you run into performance issues you can override shouldComponentUpdate to do your own logic, or just inherit from React.PureComponent instead of React.Component as it says in the docs :

If you determine a specific component is slow after profiling, you may change it to inherit from React.PureComponent which implements shouldComponentUpdate() with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare this.props with nextProps and this.state with nextState and return false to tell React the update can be skipped.