title: Should I manipulate DOM directly or using React state/props?
body: <p>This is the situation:</p>
  
  <p>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 the <code>render()</code> function when user reacts with the list, like <code>mouseover</code>, <code>click</code> and etc..</p>
  
  <p>Though React has virtual DOM technology, but I think it is still very inefficient to run <code>render()</code> every time. The documents do not recommend to manipulate DOM directly, but I think it is more efficient. What should I do? Thx.</p>