Should I Manipulate Dom Directly Or Using React State/props?

This is the situation: This component renders many data as a list. If I use React state/props to control the DOM style(add classes or modify some attributes), React will always run

Solution 1:

I wouldn't mix writing React with directly manipulating the DOM; do either but not both.

If you are already using React, just use it for what you want. If possible, break the components into as small of pieces as possible; this will help the number renders.

It may be slightly more inefficient to have React re-render too much, but remember that React has been heavily optimized for DOM manipulation.

Solution 2:

As far as rerendering in react is concerned, it has been heavily optimised. You may think that the render() function runs on every small manipulation but the thing that is not visibile is that the rerender doesn't occur for the entire DOM rather on only the portion that has changed.

React uses the virtual DOM technology and then it takes out the difference between the current and the virtual dom much like string comparison and then only renders the difference and is thus highly efficient.

So I would recommend you to follow the documentation and not mix DOM manipulation with react.