react 学习总结 | 函数式组件中必知必会的条件渲染和遍历渲染

在 React 中，常常会遇到各种数据驱动组件渲染的情况。不同的数据表示不同的组件状态，我们需要根据应用的不同状态，只渲染对应状态下的组件内容，这就是所谓的条件渲染。

在个人近期的项目经验中主要遇到以下几种常见的 react jsx 在内联条件渲染，主要包括以下三种：

1. 与运算符&&实现元素是否需要渲染；
2. 三目运算符 ？ 实现if-else条件渲染；
3. 返回null 实现阻止条件渲染。

以及最常用的使用map来进行遍历循环渲染。

借本文做一个小总结，分享一些个人经验给大家。

---

&& 运算符实现元素渲染

我们在jsx元素标签中，通常可以使用 && 来判断元素是否需要渲染。

简洁来讲，表达式就是像这样， value && 。 如果 value 为 true，那么 标签就会被渲染，若为false，则不被渲染；

以下结合一个超级简单的例子来说明以下这种渲染方式。

function demo () {
  const [show, setShow] = useState(true)
  const hidden = ()=> {
    setShow(false);  // 不显示组件
  } 

  return (
  	<div>
        <button onClick={hidden}>隐藏以下文字</button>
        {
          show && (<p> 点击按钮即可隐藏本句子 </p>）
        }
	</div>
  )
}

---

? 三目运算符实现if-else渲染

三目运算符的使用场景就是，两个组件的状态和内容存在互斥的情形，如果显示A，那么就要隐藏B，反之，显示A就要隐藏B。

写成简洁的表达式，就是：

value ? : .。如果 value 是true 那么显示 ，否则显示。

以下是个人写的一个简单易懂的例子。

function demo () {
  const [show, setShow] = useState(true)
  const showContent = ()=> {
    setShow(!show); 
  } 

  return (
  	<div>
        <button onClick={hidden}>点击按钮，反复显示内容A和内容B</button>
        {
          show ? (<p> 内容 A </p>):(<p> 内容 B </p>)
        }
	</div>
  )
}

---

返回 null 阻止组件渲染

有时我们可能会遇到希望隐藏组件，即便是该组件已经被其他的组件所渲染。常见的情况是，子组件在父组件内被渲染，父组件想要隐藏或者说“删除父组件”，那么我们可以在子组件中提前返回null组织子组件的渲染。

结合个人理解，以下给出一个比较好理解的例子。

function son (props){
	const {show} = props;
	if (!show){
	  return null;  // 提前返回null，不渲染子组件的内容
	}
	return (<p> 这是子组件的内容 </p> )
}

function father () {
  const [show, setShow] = useState(true)
  const notShow = () => {
    setShow(false); // 阻止子组件的渲染
  }
  
  return (
  	<div>
        <button onClick={notShow}>点击按钮，阻止渲染子组件</button>
        <son show={show} />
	</div>
  )
}

需要注意是 son 返回 null ，子组件不会进行渲染，而在父组件中接收到null，不会影响父组件的生命周期和渲染。

---

map 实现遍历渲染

遍历渲染是几乎是一种特别常用的渲染方式，我们通常数据是一个数组的形式存放，然后对数组进行map操作，将数组元素的内容输出到dom节点上去，完成页面的渲染。

以下给出一个通俗易懂的例子，帮助理解。

function demo () {
	const [content, setContent] = React.useState([
	{"id" 1, "msg": "消息1"}, {"id": 2, "msg": "消息2"}])

  return (
  	<div>
        {
        content.map(item => (  // item代表着content数组里头的每一个元素。
		  <p> id: item.id </p>
		  <p> msg: item.msg </p>
		))
        }
	</div>
  )
}

好啦，你掌握以上几种渲染方式，足以应付开发过程中许多数据渲染问题啦。很多时候我们需要对以上的各种渲染混合使用，比如在遍历渲染中使用if-else、是否、阻止条件渲染，那就得根据你的项目需要来使用啦。