类组件的条件与循环语句各自的三种方式

​ 条件语句（类组件）

​ 1.jsx当中的三元运算（在render下面的return里面），不支持且运算&&

​ 2.在render与return之间设置变量，利用js条件语句进行判断，并且在JSX当中输出变量

​ 3.在render上面，与生命周期钩子函数并列，定义函数，在函数当中设置变量，利用js条件语句进行判断，并且需要将变量return返回，然后在jsx中进行函数的调用

​ 条件语句（函数式组件）

​ 1.jsx当中的三元运算（在render下面的return里面），不支持且运算&&

​ 2.return上面设置变量，利用js条件语句进行判断，并且在JSX当中输出变量

​ 3.在return上面，定义自定义函数，在函数当中设置变量，利用js条件语句进行判断，并且需要将变量return返回，然后在jsx中进行函数的调用

​ 循环语句

​ 1.jsx当中利用只能用map进行遍历（在render下面的return里面）

​ 2.在render与return之间设置变量，利用js循环语句进行push到新数组变量中，并且在JSX当中输出数组变量

​ 3.在render上面，与生命周期钩子函数并列，定义函数，在函数当中设置变量，利用js循环语句进行push到新数组变量中，并且需要将变量return返回，然后在jsx中进行函数的调用

export default class App extends Component {
  state = {
    isMale: true,
    list: [1, 2, 3, 4, 5],
  };

  renderGender = () => {
    let gender = "男";
    if (this.state.isMale) {
      gender = "男";
    } else {
      gender = "女";
    }
    return gender;
  };

  renderList = () => {
    let lst = [];
    for (let i = 0; i < this.state.list.length; i++) {
      lst.push(<Text key={i}>{this.state.list[i]}</Text>);
    }
    return lst;
  };

  render() {
    const lst = [];
    this.state.list.forEach((item) => {
      return lst.push(<Text key={item}>{item}</Text>);
    });

    return (
      <View style={styles.container}>
        <Button
          title="Toggle"
          onPress={() => {
            this.setState({
              isMale: !this.state.isMale,
            });
          }}
        />
        <Text>{this.renderGender()}</Text>
        {this.state.list.map((item, index) => {
          return <Text key={item}>{item}</Text>;
        })}

        {lst}

        {this.renderList()}
      </View>
    );
  }
}

const App = () => {
  const [isMale, setIsMale] = useState(true);
  const [list, setList] = useState([1, 2, 3, 4, 5]);

  const renderGender = () => {
    let varIsMale = "男";
    if (isMale) {
      varIsMale = "男";
    } else {
      varIsMale = "女";
    }

    return varIsMale;
  };

  let varIsMale = "男";
  if (isMale) {
    varIsMale = "男";
  } else {
    varIsMale = "女";
  }

  let loopList = [];
  list.forEach((item) => {
    loopList.push(<Text key={item}>{item}</Text>);
  });

  const renderLoopList = () => {
    let loopList = [];
    list.forEach((item) => {
      loopList.push(<Text key={item}>{item}</Text>);
    });
    return loopList;
  };
  return (
    <View style={styles.container}>
      <Text>{renderGender()}</Text>
      {list.map((item) => {
        return <Text key={item}>{item}</Text>;
      })}

      {loopList}
      {renderLoopList()}
    </View>
  );
};