How is the render?

I can not understand why I have the components constantly stretches render()
I have a 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}">
</treestructure></div>
);
}
}

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

export default Tree;


And component TreeStructure.
import React from 'react';
ControlLink import 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}">

</controllink></div>
the <div>
 {this.renderTree(object, levelKey, padding)}
</div>
 <div style="{{paddingLeft:" `${padding}px`}} classname="row-tree">
the <div>}</div>
</div>
</div>
);
}

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

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

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

export default TreeStructure;


So here I am at TreeStructure click on the button and I called addLevel parent. The question is why then I have the chain called render and TreeStructure including. Ie here the point is that when you click only changes state at the Tree, and TreeStructure nothing changes. So why is called render from the TreeStructure . And how you can do so when you click render at the TreeStructure has not been called
July 4th 19 at 23:54
1 answer
July 4th 19 at 23:56
Solution
Because the run starts Render parent Render all child components. This is the essence of React.
You can manually control whether the component will be rendered if you add (in your case, TreeStructure) function shouldComponentUpdate(nextProps, nextState)
If it returns false the component will not be rendered.
thank you already solved the issue) - dahlia_Bog commented on July 4th 19 at 23:59
: if I add a child element shouldComponentUpdate(nextProps, nextState) {
if ((this.props === nextProps) && (this.state === nextState)){
return false
} else { return true;}

}
render(){
console.log("render FilterForAll")
he rendered, although the data is not updated
this is as intended or is something wrong? - bertrand.Gutmann commented on July 5th 19 at 00:02
as you see it if the data is not updating? the first time component is mounted, the renderer anyway is - braeden.Daugherty commented on July 5th 19 at 00:05

Find more questions by tags ReactRedux