案例:默认显示文案,点击按钮隐藏,再点击显示
思路:定义控制展示与否的state.show.点击按钮修改show.JSX内容依赖show展示。
现在讨论JSX依赖show展示的几种方式:
方式一:
render中定义临时变量eles作为JSX html内容展示,show=true,eles赋值,render中显示{eles}
方式二:
三元运算或逻辑与。当show && <h2>{message}</h2>
前两种方式,属于纯条件渲染,元素会被移除加载,重排导致DOM渲染压力大,采用style属性控制的方式。
方式三:
总结: react非常灵活,条件渲染走的是js普通逻辑