反应特定的渲染组件

Question

I have a controller, which renders a Table and action buttons. The Table has Row childs, with checkboxes. This is my render func:

render() {
        <div>
            <Table items={this.props.items}></Table>
            <Actions selectedItems={_.filter(this.props.items, i => i.selected)}
        </div>
}

By checking each row, I update the item in the list with a 'selected' property. But now, If I want to change the selected indication, I have to rerender all the container, including the table. How can I do that without rendering the whole table? (Only render the FloatingActions)

this is my redux mapping:

Thanks.

Answer 1

You should use react key property and give each row a unique key.
In this case React calls the render method of Table but only re-renders the changed row in the DOM.
Take a look here .

Answer 2

You should learn to think in React. It is ok that every component will invoke render() function

your component in fact will only reRender if it starts to look different.

if you whant to manually decide if it need to change something, you can also use componentWillReceiveProps(newProps) and check if new props are different

it is method from life-circle like shouldComponentUpdate

but better think about containing your view state in your Store.