03：React学习笔记：渲染

1.元素渲染

1.1将一个元素渲染为DOM

假设：

<div id="root"></div>

将以上这个React元素渲染到根DOM节点中，只需把它们一起传入ReactDOM.render();

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

1.2 更新已渲染的元素

React元素是不可变对象，一旦创建就无法更改其子元素或属性。更新UI唯一方式就创建一个全新元素并将其传入ReactDOM.render().

看下面examples例子

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点。
React 只更新它需要更新的部分

2.条件渲染

2.1 使用 if 或者条件运算符

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

2.2 元素变量

变量来储存元素。 它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
 <div>
    button变量就是存储的LogoutButton 组件或LoginButton （根据isLoggedIn值）
        {button}
      </div>

2.3 JSX 中内联条件渲染的方法

与运算符 &&
(true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。)

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

2.4 三目运算符

condition ? true : false

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

3.防止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

4.列表渲染

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.id}>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

5.列表渲染中的key

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。key 最好是这个元素在列表中拥有的一个独一无二的字符串