當涉及到調用渲染方法時，ReactJS是否「聰明」？

Question

該組件的渲染方法確實使用了提供給組件的任何道具。

當道具改變時，組件是否會重新渲染？

class MyComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    const { propValue } = props; 
    // do something with propValue... 
    } 
    render() { 
    return (
     <div>foo</div> 
    ); 
    } 
} 

Answer 1

是的，除非您執行shouldComponentUpdate，否則組件將重新呈現。您可以繼承PureComponent，它使用prop和state的淺比較以及以前的值來確定組件是否應更新。

Answer 2

將會調用render - 是的。除非你執行shouldComponentUpdate返回false。

DOM將被重新渲染 - 沒有。

另外，您也可以看看https://babeljs.io/docs/plugins/transform-react-constant-elements/，它提升靜態元素。

在

const Hr =() => { 
    return <hr className="hr" />; 
}; 

缺貨

const _ref = <hr className="hr" />; 

const Hr =() => { 
    return _ref; 
};