Avoid using references in React (pass this, operate this)

The way you pass this, manipulate this, to do something about it, let’s call it reference. As follows:

class Test extends Component
{
    render()
    {
        return (
        <div>
		{util.testCode(this)}
        </div>
	    )
	}
}

export default Test;
Copy the code

// Operate on this passed in the Util filetestCode(that)
{
	that.setState({
	    ...
	});
}
Copy the code

This approach will result in deep nesting, low code readability, which is not easy for others to understand, and requires more time to think about where the state was changed when reviewing. Therefore, the better way is not to directly operate on the source class this way, the code coupling as low as possible, is one of the pursuit of our program engineers.

class Test extends Component
{
    render()
    {
        return (
        <div>
		{util.testCode()}
	</div>
	    )
	}
}

export default Test;
Copy the code

testCode()
{
    return 'test'
}
Copy the code

The example may not be sufficient, but do not operate directly on the source class’s this, to avoid falling into the hole you dug, is the warning of the old hand who jumped out of the hole. To take good care