Как происходит render?

Question

[Pogran]

Не могу понять почему у меня у компонентов постоянно тянется render()
У меня есть component Tree .

class Tree extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			oldValue: '',
			newValue: '',
			oldKey: '',
			newKey: '',
			level: '',
			action: false,
		};

		this.onAddLevel = this.onAddLevel.bind(this);
	}

	resetState() {
		this.setState({
			action: false,
			newKey: '',
			newValue: '',
			oldKey: '',
			oldValue: ''
		});
	}


	onAddLevel(e) {
		e.preventDefault();

		this.setState({
			level: e.target.dataset.level,
			oldKey: e.target.dataset.key,
			action: 'add-level',
			newValue: '',
			newKey: ''
		});
	}

	render() {
		console.log('Tree');

		return (
			<div className="tree">
				<TreeStructure
					addLevel={this.onAddLevel}
					structure={this.props.entity.structure}
				/>
			</div>
		);
	}
}

Tree.propTypes = {
	entity: React.PropTypes.object.isRequired,
	addLevel: React.PropTypes.func.isRequired
};

export default Tree;

И компонент TreeStructure.

import React from 'react';
import ControlLink from './ControlLink';
import isEmpty from 'lodash/isEmpty';

class TreeStructure extends React.Component {
	constructor(props) {
		super(props);
	}

	renderTree(object, level ='', padding = 0) {
		console.log('render Tree');
		padding  += 12;

		return (
			Object.keys(object).map(key => {
				if(typeof object[key] == 'string') {
					return (
						this.renderChildString(key, object[key], level ,padding)
					)
				} else {
					return (
						this.renderLevelString(key, object[key], level, padding)
					);
				}
			})
		);
	}

	renderChildString(key, value, level='',padding) {
		return (
			<div className="row-tree" style={{paddingLeft: `${padding}px`}} key={key} >
				<b>{key}</b>: {value}

				<div className="pull-right">
					<ControlLink
						title="Add level"
						level={level}
						keyVal={key}
						className="create-element"
						parentClassName="fa fa-plus"
						onClick={this.props.addLevel}
					/>

				</div>
				<div>
					{this.renderTree(object, levelKey, padding)}
				</div>
				<div style={{paddingLeft: `${padding}px`}} className="row-tree">
					<div>&#125;</div>
				</div>
			</div>
		);
	}

	render() {
		console.log('render structure');

		return (
			<div>
				{this.renderTree(this.props.structure)}
			</div>
		);
	}
}

TreeStructure.propTypes = {
	structure: React.PropTypes.object.isRequired,
	addLevel: React.PropTypes.func.isRequired
};

export default TreeStructure;

Так вот я в TreeStructure нажимаю на кнопку и у меня вызывается addLevel родителя. Вопрос почему потом у меня по цепочке вызываются все render и у TreeStructure в том числе. Т.е тут смысл в том что при клике изменяется только state у Tree, а у TreeStructure ничего не меняется. Так почему же вызывается render у TreeStructure . И как можно сделать чтобы при клике render у TreeStructure не вызывался

Comments

[Pogran]

Как я понимаю главный косяк происхоодит потому что я меняю setState, а после setState происходит render данного компонента и по цепочке срабатывают все render.

Answer 1

[UsulPro]

Потому-что запуск Render родителя запускает Render у всех дочерних компонентов. В этом суть React.
Вы можете вручную управлять тем будет ли компонент рендериться если добавите в него (в вашем случае в TreeStructure) функцию shouldComponentUpdate(nextProps, nextState)
Если она возвращает false то компонент рендериться не будет.

Comments

[Pogran]

спасибо уже давно решил вопрос)

[vaskadogana]

UsulPro: если я добавляю в дочерний элемент shouldComponentUpdate(nextProps, nextState) {
if ((this.props === nextProps) && (this.state === nextState)){
return false
} else { return true }

}
render(){
console.log("render FilterForAll")
то он рендерится, хотя данные не обновились
это так и задумано или что - то не так?

[UsulPro]

а как вы это видите если данные не обновляете? первый раз, когда сомпонент монтируется, рендер все–равно проходит