个人来说，if/else用的比较少，条件运算符和循环倒是经常用

if/else条件语句以及条件运算符

if/else

Demo如下，直接就用就好了。

import React from 'react';
class Demo extends React.Component{
    render(){
        let isAdmin = true;
        if (isAdmin) {
            return "管理员登陆成功";
        } else {
            return "用户登陆成功";
        }
    }
}

export default Demo;

当然，以上代码可以被重写为：

import React from 'react';

class Demo extends React.Component{
    render(){
        let isAdmin = true;
        let welcome = null;
        if (isAdmin) {
            welcome = "管理员登陆成功";
        } else {
            welcome = "用户登陆成功";
        }

        return(
            <React.Fragment>
                {welcome}
            </React.Fragment>
        )
    }
}

export default Demo;

这样就只需要一个return()了。

条件运算符

当然，简单的if/else语句一般都可以替换成条件运算符，如：

import React from 'react';

class Demo extends React.Component{
    render(){
        let isAdmin = true;
        let welcome = isAdmin ? "管理员登陆成功" : "用户登陆成功";

        return(
            <React.Fragment>
                {welcome}
            </React.Fragment>
        )
    }
}

export default Demo;

循环

直接上案例吧

import React from 'react';

class Demo extends React.Component{
    render(){
        var list = ["o", "l", "l", "e", "h"];
        var list2 = [];
        for (let i = list.length-1; i >=0 ; i--) {
            list2.push(list[i]);
        }

        return(
            <React.Fragment>
                {list2}
            </React.Fragment>
        )
    }
}

export default Demo;

输出结果为：

hello

使用map代替循环

map还是蛮常用的，找别的代码现在基本上都不太使用循环而是直接用map了。如果不需要index的话，map挺适合处理数据的。

import React from 'react';

class Demo extends React.Component{
    render(){
        var books = [
            {图书id: 1, 书名: '飞狐外传', 分类: '武侠'},
            {图书id: 2, 书名: '雪山飞狐', 分类: '武侠'},
            {图书id: 3, 书名: '连城诀', 分类: '武侠'},
        ];

        return(
            <React.Fragment>
                <table className="图书列表">
                    <caption>图书列表</caption>
                    <thead>
                        <tr>
                            <td>图书id</td>
                            <td>图书名称</td>
                            <td>图书分类</td>
                        </tr>
                    </thead>
                    <tbody>
                        {books.map(book=>{
                            return (
                                <tr>
                                    <td>{book.图书id}</td>
                                    <td>{book.书名}</td>
                                    <td>{book.分类}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </React.Fragment>
        )
    }
}

export default Demo;

输入出下：

有一点需要注意的就是，在使用map的时候，虽然会正常渲染，但是打开console的话会有如下报错信息：

Each child in a list should have a unique “key” prop.

Check the render method of Demo. See https://fb.me/ react-warning-keys for more information.
in tr (at Demo.jsx:25)

in Demo (at src/index.js:5)

这里只需要做如下修改就好了：

{books.map(book=>{
                            return (
                                <tr key={book.图书id}>
                                    <td>{book.图书id}</td>
                                    <td>{book.书名}</td>
                                    <td>{book.分类}</td>
                                </tr>
                            )
                        })}

在元素中加入key也是React处理数据变动的一种方法。例如说数据突然发生了变动，{图书id: 1, 书名: '飞狐外传', 分类: '武侠'}变成了{图书id: 1, 书名: '新飞狐外传', 分类: '武侠'}，在有了id的情况下，react只会对<td>1</td><td>飞狐外传</td><td>武侠</td></tr>这一段再渲染，而不会将整个页面重新渲染。

Reference

Understanding unique keys for array children in React.js