JavaScript 调查表明：多数人使用 React 但不满意

从专门 针对 JavaScript 的 2021 年度调查中可以发现，在 JavaScript 框架和库方面，React 的使用率继续领先，其次是 Angular 和 Vue.js。React 的满意度明显下降，在 Vue.js、Solid 和 Svelte 之后排名第四。Solid 在满意度方面排名第一，在兴趣方面排名第二，即使在实际使用它的人方面排名倒数第二。

老王点评：这个调查报告还披露了很多信息，值得一看。

声称恢复 GPU 挖矿性能的工具实际上是恶意软件

一些英伟达的新显卡带有性能限制，以减少该显卡对加密货币矿工的吸引力。大量的 GPU 显卡被用来挖矿，使得游戏玩家和其他人很难获得这种硬件，而且导致价格昂贵。前两天，有网站介绍了一个用于可以打开 RTX 显卡的加密货币挖掘性能限制。不过，第二天他们发现“该工具非但没有解决挖矿性能上限的问题，反而使主机系统感染了恶意软件”。目前还不清楚该恶意软件到底是做什么的，可能是键盘记录、信息窃取，也有可能是加密货币挖掘。

老王点评：真是哭笑不得的事情。好吧，现在没人和玩家们抢新显卡了。

红帽扩展 eBPF 用于输入设备的 HID 子系统

在内核中运行沙盒程序的 eBPF 非常有用，它已经超越了起源于网络子系统中的最初的 BPF，它对其他领域，如安全、追踪和内核内 JIT 虚拟机等也非常实用。红帽发出了 一组补丁 为 HID 设备引入了 eBPF 支持。其中一个非常有用的领域是用于有问题或奇怪的设备，这可以将修复放在一些外部仓库中，并作为 eBPF 程序在启动时加载，以避免需要创建新的内核，而经历漫长的上下游过程。

老王点评：如果你还没有了解过 eBFP，建议了解一下，它已经越来越强大重要了。

如果你正在用 React.js 或 React Native 来开发用户界面的话，试试这些框架。

React.js 和 React Native 都是用来开发用户界面（UI）的很受欢迎的开源平台。在 StackOverflow 2019 年度开发者调查里，两个框架的可取性和使用情况都排名靠前。React.js 是 Facebook 在 2011 年开发的一个 JavaScript 库，来实现跨平台，动态以及高性能的 UI 设计需求；而 React Native 则是 Facebook 在 2015 年发布的框架，目的是使用 JavaScript 构建原生应用。

下面介绍 13 个最好的 React JavaScript 框架，都是开源项目。前 11 个（和 React 一样）都使用 MIT 许可证授权，后面两个使用 Apache 2.0 许可证。

1、Create React App

这个 Facebook 开发的命令行工具是 React Native 项目一定要用的。因为 Create React App 使用很简单，还可以避免你自己手动设定和配置应用，因此能节省大量的时间和精力。仅仅使用给一个简单的命令，就可以为你准备好创建 React 原生项目所需的一切。你可以用它来创建分类和文件，而且该框架还自带了工具用来构建，测试和启动应用。

# 安装软件包
$ npm install -g create-react-native-web-app
 
# 运行 create-react-native-web-app <项目目录>
$ create-react-native-web-app myApp
 
# 切换到创建的 <项目目录>
$ cd myApp
 
# 运行 Web/Ios/Android 调试
# Web
$ npm run web
 
# IOS（模拟）
$ npm run ios
 
# Android（实际连接的设备）
$ npm run android

为什么选择 Create React App

1. 使用配置包、转码器，以及测试运行器进行开发的一流工具
2. 在应用架构里不需要配置以及没有额外文件
3. 确定的开发栈
4. 高效快速的开发工具

2、Material Kit React

Material Kit React 是受谷歌的 Material Design 系统启发开发的，很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件，可以互相搭配做出非常好的效果。有超过一千个完全编码的组件，每一个都有用文件夹组织起来的独立层。这样你就可以有上千个选项可以选择。它同时也包含一些示例页面，方便你从中寻找灵感，或者向别人分享你的点子或创意。

安装 Material Kit

$ npm install @material-ui/core

使用

import React from 'react';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
);

Material-UI 组件不需要其他额外设置，也不会干扰全局变量空间。

优点

这个 React 组件支持简易快速的网页开发。你可以用它创建自己的设计系统，或者直接开始 Material Design。

3、Shards React

这个现代的 React UI 工具为了追求高效率，是从最底层开始构建的。它拥有现代的设计系统，可以让你按自己的想法任意定制。你甚至可以下载源文件，然后从代码级别定制。另外，它用来设计样式的 SCSS 语法提高了开发体验。

Shards React 基于 Shards，使用了 React Datepicker、React Popper（一个定位引擎）和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本，可以帮你寻找灵感或上手。

用 Yarn 或 NPM 安装 Shards

# Yarn
yarn add shards-react

# NPM
npm i shards-react

优点

1. Shards 是一个轻量级的脚本，压缩后大概 13kb
2. Shards 默认支持响应式，图层可以适配任意大小屏幕
3. Shards 有完整的文档，可以快速开始构建漂亮的界面

4、Styled Components

这个高效的 CSS 工具可以用来为应用的可视界面创建小型可重用的组件。使用传统的 CSS，你可能会不小心覆盖掉网站其他位置的选择器，但 Styled Components 通过使用直接内嵌到组件里的 CSS 语法，可以完全避免这个问题。

安装

npm install --save styled-components

使用

const Button = styled.button`
  background: background_type;
  border-radius: radius_value;
  border: abc;
  color: name_of_color;
  Margin: margin_value;
  padding: value`;

优点

1. 让组件有更好的可读性
2. 组件样式依赖 JavaScript
3. 创建定制 CSS 组件
4. 内嵌样式
5. 简单地调用 styled() 可以将组件甚至是自定义组件转换成样式组件

5、Redux

Redux 是一个为 JavaScript 应用提供状态管理的方案。常用于 React.js，也可以用在其他类 React 框架里。

安装

sudo npm install redux
sudo npm install react-redux

使用

import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: value}) {
  return createStore(rotateReducer,state);
}

export default configureStore;

优点

1. 可预计的状态更新有助于定义应用里的数据流
2. 逻辑上测试更简单，使用 reducer 函数进行时间旅行调试也更容易
3. 统一管理状态

6、React Virtualized

这个 React Native JavaScript 框架帮助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制请求和文档对象模型（DOM）元素的数量，从而提高 React 应用的性能。

安装

npm install react-virtualized

使用

import 'react-virtualized/styles.css'
import { Column, Table } from 'react-virtualized'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...等等
}

优点

1. 高效展示大量数据
2. 渲染超大数据集
3. 使用一系列组件实现虚拟渲染

7、React DnD

React DnD 用来创建复杂的拖放界面。拖放控件库有很多，选用 React DnD 是因为它是基于 HTML5 的拖放 API 的，创建界面更简单。

安装

npm install react-dnd-preview

使用

import Preview from 'react-dnd-preview';
 
const generatePreview = ({itemType, item, style}) => {
  return <div class="item-list" style={style}>{itemType}</div>;
};

class App extends React.Component {
 ...
  render() {
    return (
      <DndProvider backend={MyBackend}>
        <ItemList />
        <Preview generator={generatePreview} />
        // or
        <Preview>{generatePreview}</Preview>
      </DndProvider>
    );
  }
}

优点

1. 漂亮自然的控件移动
2. 强大的键盘和屏幕阅读支持
3. 极限性能
4. 强大整洁的接口
5. 标准浏览器支持非常好
6. 中性样式
7. 没有额外创建 DOM 节点

8、React Bootstrap

这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React，可以更好地控制每个组件的功能。每个组件都构建成能轻易访问，因此 React Bootstrap 有利于构建前端框架。有上千种 bootstrap 主题可以选择。

安装

npm install react-bootstrap bootstrap

使用

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

优点

1. 可以简单导入所需的代码/组件
2. 通过压缩 Bootstrap 节省了输入和问题
3. 通过压缩 Bootstrap 减少了输入工作和冲突
4. 使用简单
5. 使用元素封装

9、React Suite

React Suite 是另一个高效的 React.js 框架，包含了大量组件库，方便开发企业级产品。支持所有主流浏览器和平台，适用于任何系统。还支持服务器端渲染。

安装

npm i rsuite --save

使用

import { Button } from 'rsuite';
import 'rsuite/styles/less/index.less';
ReactDOM.render(<Button>Button</Button>, mountNode);

优点

1. 通过全局访问特性轻松管理应用
2. 使用 Redux 库集中管理系统状态
3. Redux 库有灵活的 UI 层，以及广泛的生态
4. Redux 库减少系统复杂度，并提供了全局访问特性

10、PrimeReact

PrimeReact 最值得推荐的是它提供了几乎覆盖所有基本 UI 需求的组件，比如输入选项，菜单，数据展示，消息，等等。这个框架还优化了移动体验，帮助你设计触摸优化的元素。

安装

npm install primereact --save
npm install primeicons --save

使用

import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';
dependencies: {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-transition-group": "^2.2.1",
    "classnames": "^2.2.5",
    "primeicons": "^2.0.0"
}

优点

1. 简单而高效
2. 容易使用
3. Spring 应用
4. 创建复杂用户界面
5. 好用而简单

11、React Router

React Router 在 React Native 开发社区很受欢迎，因为它上手很容易。只需要你在电脑上安装 Git 和 npm 包管理工具，有 React 的基础知识，以及好学的意愿。没什么特别难的地方。

安装

$ npm install --save react-router

使用

import { Router, Route, Switch } from "react-router";
 
// 使用 CommonJS 模块
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var Switch = require("react-router").Switch;

优点

1. 动态路由匹配
2. 在导航时支持不同页面的 CSS 切换
3. 统一的应用结构和行为

12、Grommet

Grommet 常用于开发响应式、可访问的移动网页应用。这个用 Apache 2.0 许可证授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性、模块化、响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因，比如奈飞、通用电气、优步以及波音。

安装 for yarn and npm

$ npm install grommet styled-components --save

使用

"grommet-controls/chartjs": {
          "transform": "grommet-controls/es6/chartjs/${member}",
          "preventFullImport": true,
          "skipDefaultConversion": true

优点

1. 创建一个工具包来打包
2. 把开放政策发挥到极致
3. 重构有助于影响已成立的组织

13、Onsen UI

Onsen UI 另一个使用 HTML5 和 JavaScript 的手机应用开发框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 许可证授权。

Onsen 提供了标签、侧边栏、堆栈导航以及其他组件。这个框架最好的地方是，它所有的组件都支持 iOS 和安卓 Material Design 自动适配，会根据不同的平台切换应用的外观。

安装

npm install onsenui

使用

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here
    });

})();

优点

1. Onsen UI 基于自由而开源代码
2. 不强制基于它开发的应用使用任何形式的 DRM
3. 内置了 JavaScript 和 HTML5 代码
4. 给最终用户带来原生体验

你最喜欢哪个 React JavaScript 框架？请在评论区分享。

via: https://opensource.com/article/20/1/react-javascript-frameworks

作者：Amit Dua 选题：lujun9972 译者：zpl1025 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

在过去的几个月里，我一直在使用 React 和 React-Native。我已经发布了两个作为产品的应用， Kiven Aa（React）和 Pollen Chat（React Native）。当我开始学习 React 时，我找了一些不仅仅是教我如何用 React 写应用的东西（一个博客，一个视频，一个课程，等等），我也想让它帮我做好面试准备。

我发现的大部分资料都集中在某一单一方面上。所以，这篇文章针对的是那些希望理论与实践完美结合的观众。我会告诉你一些理论，以便你了解幕后发生的事情，然后我会向你展示如何编写一些 React.js 代码。

如果你更喜欢视频形式，我在 YouTube 上传了整个课程，请去看看。

让我们开始……

React.js 是一个用于构建用户界面的 JavaScript 库

你可以构建各种单页应用程序。例如，你希望在用户界面上实时显示变化的聊天软件和电子商务门户。

一切都是组件

React 应用由组件组成，数量繁多且互相嵌套。你或许会问：”可什么是组件呢？“

组件是可重用的代码段，它定义了某些功能在 UI 上的外观和行为。 比如，按钮就是一个组件。

让我们看看下面的计算器，当你尝试计算 2 + 2 = 4 -1 = 3（简单的数学题）时，你会在 Google 上看到这个计算器。

红色标记表示组件

如上图所示，这个计算器有很多区域，比如展示窗口和数字键盘。所有这些都可以是许多单独的组件或一个巨大的组件。这取决于在 React 中分解和抽象出事物的程度。你为所有这些组件分别编写代码，然后合并这些组件到一个容器中，而这个容器又是一个 React 组件。这样你就可以创建可重用的组件，最终的应用将是一组协同工作的单独组件。

以下是一个你践行了以上原则并可以用 React 编写计算器的方法。

<Calculator>
  <DisplayWindow />
  <NumPad>
    <Key number={1}/>
    <Key number={2}/>
    .
    .
    .
    <Key number={9}/>
  </NumPad>
</Calculator>

没错！它看起来像HTML代码，然而并不是。我们将在后面的部分中详细探讨它。

设置我们的 Playground

这篇教程专注于 React 的基础部分。它没有偏向 Web 或 React Native（开发移动应用）。所以，我们会用一个在线编辑器，这样可以在学习 React 能做什么之前避免 web 或 native 的具体配置。

我已经为读者在 codepen.io 设置好了开发环境。只需点开该链接并且阅读 HTML 和 JavaScript 中的所有注释。

控制组件

我们已经了解到 React 应用是各种组件的集合，结构为嵌套树。因此，我们需要某种机制来将数据从一个组件传递到另一个组件。

进入 “props”

我们可以使用 props 对象将任意数据传递给我们的组件。 React 中的每个组件都会获取 props 对象。在学习如何使用 props 之前，让我们学习函数式组件。

a) 函数式组件

在 React 中，一个函数式组件通过 props 对象使用你传递给它的任意数据。它返回一个对象，该对象描述了 React 应渲染的 UI。函数式组件也称为无状态组件。

让我们编写第一个函数式组件。

function Hello(props) {
  return <div>{props.name}</div>
}

就这么简单。我们只是将 props 作为参数传递给了一个普通的 JavaScript 函数并且有返回值。嗯？返回了什么？那个 <div>{props.name}</div>。它是 JSX（JavaScript Extended）。我们将在后面的部分中详细了解它。

上面这个函数将在浏览器中渲染出以下 HTML。

<!-- If the "props" object is: {name: 'rajat'} -->
<div>
  rajat
</div>

阅读以下有关 JSX 的部分，这一部分解释了如何从我们的 JSX 代码中得到这段 HTML 。

如何在 React 应用中使用这个函数式组件？ 很高兴你问了！ 它就像下面这么简单。

<Hello name='rajat' age={26}/>

属性 name 在上面的代码中变成了 Hello 组件里的 props.name ，属性 age 变成了 props.age 。

记住！ 你可以将一个 React 组件嵌套在其他 React 组件中。

让我们在 codepen playground 使用 Hello 组件。用我们的 Hello 组件替换 ReactDOM.render() 中的 div，并在底部窗口中查看更改。

function Hello(props) {
  return <div>{props.name}</div>
}

ReactDOM.render(<Hello name="rajat"/>, document.getElementById('root'));

但是如果你的组件有一些内部状态怎么办？例如，像下面的计数器组件一样，它有一个内部计数变量，它在 + 和 - 键按下时发生变化。

具有内部状态的 React 组件

b) 基于类的组件

基于类的组件有一个额外属性 state ，你可以用它存放组件的私有数据。我们可以用 class 表示法重写我们的 Hello 。由于这些组件具有状态，因此这些组件也称为有状态组件。

class Counter extends React.Component {
  // this method should be present in your component
  render() {
    return (
      <div>
        {this.props.name}
      </div>
    );
  }
}

我们继承了 React 库的 React.Component 类以在 React 中创建基于类的组件。在这里了解更多有关 JavaScript 类的东西。

render() 方法必须存在于你的类中，因为 React 会查找此方法，用以了解它应在屏幕上渲染的 UI。为了使用这种内部状态，我们首先要在组件

要使用这种内部状态，我们首先必须按以下方式初始化组件类的构造函数中的状态对象。

class Counter extends React.Component {
  constructor() {
    super();
    
    // define the internal state of the component
    this.state = {name: 'rajat'}
  }
  
  render() {
    return (
      <div>
        {this.state.name}
      </div>
    );
  }
}

// Usage:
// In your react app: <Counter />

类似地，可以使用 this.props 对象在我们基于类的组件内访问 props。

要设置 state，请使用 React.Component 的 setState()。 在本教程的最后一部分中，我们将看到一个这样的例子。

提示：永远不要在 render() 函数中调用 setState()，因为 setState 会导致组件重新渲染，这将导致无限循环。

基于类的组件具有可选属性 “state”。

除了 state 以外，基于类的组件有一些声明周期方法比如 componentWillMount()。你可以利用这些去做初始化 state这样的事， 可是那将超出这篇文章的范畴。

JSX

JSX 是 JavaScript Extended 的缩写，它是一种编写 React 组件的方法。使用 JSX，你可以在类 XML 标签中获得 JavaScript 的全部力量。

你把 JavaScript 表达式放在 {} 里。下面是一些有效的 JSX 例子。

 <button disabled={true}>Press me!</button>
 <button disabled={true}>Press me {3+1} times!</button>;
 <div className='container'><Hello /></div>

它的工作方式是你编写 JSX 来描述你的 UI 应该是什么样子。像 Babel 这样的转码器将这些代码转换为一堆 React.createElement() 调用。然后，React 库使用这些 React.createElement() 调用来构造 DOM 元素的树状结构。对于 React 的网页视图或 React Native 的 Native 视图，它将保存在内存中。

React 接着会计算它如何在展示给用户的 UI 的内存中有效地模仿这个树。此过程称为 reconciliation。完成计算后，React 会对屏幕上的真正 UI 进行更改。

React 如何将你的 JSX 转化为描述应用 UI 的树。

你可以使用 Babel 的在线 REPL 查看当你写一些 JSX 的时候，React 的真正输出。

使用Babel REPL 转换 JSX 为普通 JavaScript

由于 JSX 只是 React.createElement() 调用的语法糖，因此可以在没有 JSX 的情况下使用 React。

现在我们了解了所有的概念，所以我们已经准备好编写我们之前看到之前的 GIF 图中的计数器组件。

代码如下，我希望你已经知道了如何在我们的 playground 上渲染它。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {count: this.props.start || 0}
    
    // the following bindings are necessary to make `this` work in the callback
    this.inc = this.inc.bind(this);
    this.dec = this.dec.bind(this);
  }
  
  inc() {
    this.setState({
      count: this.state.count + 1
    });
  }
  
  dec() {
    this.setState({
      count: this.state.count - 1
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.inc}>+</button>
        <button onClick={this.dec}>-</button>
        <div>{this.state.count}</div>
      </div>
    );
  }
}

以下是关于上述代码的一些重点。

1. JSX 使用 驼峰命名 ，所以 button 的 属性是 onClick，不是我们在HTML中用的 onclick。
2. 绑定 this 是必要的，以便在回调时工作。 请参阅上面代码中的第8行和第9行。

最终的交互式代码位于此处。

有了这个，我们已经到了 React 速成课程的结束。我希望我已经阐明了 React 如何工作，以及如何使用 React 来构建更大的应用程序，使用更小和可重用的组件。

via: https://medium.freecodecamp.org/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923

作者：Rajat Saxena 译者：GraveAccent 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

React 组件可以通过多种方式决定渲染内容。你可以使用传统的 if 语句或 switch 语句。在本文中，我们将探讨一些替代方案。但要注意，如果你不小心，有些方案会带来自己的陷阱。

三元表达式 vs if/else

假设我们有一个组件被传进来一个 name 属性。 如果这个字符串非空，我们会显示一个问候语。否则，我们会告诉用户他们需要登录。

这是一个只实现了如上功能的无状态函数式组件（SFC）。

const MyComponent = ({ name }) => {
  if (name) {
    return (
      <div className="hello">
        Hello {name}
      </div>
    );
  }
  return (
    <div className="hello">
      Please sign in
    </div>
  );
};

这个很简单但是我们可以做得更好。这是使用 三元运算符 conditional ternary operator 编写的相同组件。

const MyComponent = ({ name }) => (
  <div className="hello">
    {name ? `Hello ${name}` : 'Please sign in'}
  </div>
);

请注意这段代码与上面的例子相比是多么简洁。

有几点需要注意。因为我们使用了箭头函数的单语句形式，所以隐含了return 语句。另外，使用三元运算符允许我们省略掉重复的 <div className="hello"> 标记。

三元表达式 vs &&

正如您所看到的，三元表达式用于表达 if/else 条件式非常好。但是对于简单的 if 条件式怎么样呢？

让我们看另一个例子。如果 isPro（一个布尔值）为真，我们将显示一个奖杯表情符号。我们也要渲染星星的数量（如果不是 0）。我们可以这样写。

const MyComponent = ({ name, isPro, stars}) => (
  <div className="hello">
    <div>
      Hello {name}
      {isPro ? '♨' : null}
    </div>
    {stars ? (
      <div>
        Stars:{'☆'.repeat(stars)}
      </div>
    ) : null}
  </div>
);

请注意 else 条件返回 null 。 这是因为三元表达式要有“否则”条件。

对于简单的 if 条件式，我们可以使用更合适的东西：&& 运算符。这是使用 && 编写的相同代码。

const MyComponent = ({ name, isPro, stars}) => (
  <div className="hello">
    <div>
      Hello {name}
      {isPro && '♨'}
    </div>
    {stars && (
      <div>
        Stars:{'☆'.repeat(stars)}
      </div>
    )}
  </div>
);

没有太多区别，但是注意我们消除了每个三元表达式最后面的 : null （else 条件式）。一切都应该像以前一样渲染。

嘿！约翰得到了什么？当什么都不应该渲染时，只有一个 0。这就是我上面提到的陷阱。这里有解释为什么：

根据 MDN，一个逻辑运算符“和”（也就是 &&）：

expr1 && expr2

如果 expr1 可以被转换成 false ，返回 expr1；否则返回 expr2。 如此，当与布尔值一起使用时，如果两个操作数都是 true，&& 返回 true ；否则，返回 false。

好的，在你开始拔头发之前，让我为你解释它。

在我们这个例子里， expr1 是变量 stars，它的值是 0，因为 0 是假值，0 会被返回和渲染。看，这还不算太坏。

我会简单地这么写。

如果 expr1 是假值，返回 expr1 ，否则返回 expr2。

所以，当对非布尔值使用 && 时，我们必须让这个假值返回 React 无法渲染的东西，比如说，false 这个值。

我们可以通过几种方式实现这一目标。让我们试试吧。

{!!stars && (
  <div>
    {'☆'.repeat(stars)}
  </div>
)}

注意 stars 前的双感叹操作符（!!）（呃，其实没有双感叹操作符。我们只是用了感叹操作符两次）。

第一个感叹操作符会强迫 stars 的值变成布尔值并且进行一次“非”操作。如果 stars 是 0 ，那么 !stars 会是 true。

然后我们执行第二个非操作，所以如果 stars 是 0，!!stars 会是 false。正好是我们想要的。

如果你不喜欢 !!，那么你也可以强制转换出一个布尔数比如这样（这种方式我觉得有点冗长）。

{Boolean(stars) && (

或者只是用比较符产生一个布尔值（有些人会说这样甚至更加语义化）。

{stars > 0 && (

关于字符串

空字符串与数字有一样的毛病。但是因为渲染后的空字符串是不可见的，所以这不是那种你很可能会去处理的难题，甚至可能不会注意到它。然而，如果你是完美主义者并且不希望 DOM 上有空字符串，你应采取我们上面对数字采取的预防措施。

其它解决方案

一种可能的将来可扩展到其他变量的解决方案，是创建一个单独的 shouldRenderStars 变量。然后你用 && 处理布尔值。

const shouldRenderStars = stars > 0;

return (
  <div>
    {shouldRenderStars && (
      <div>
        {'☆'.repeat(stars)}
      </div>
    )}
  </div>
);

之后，在将来，如果业务规则要求你还需要已登录，拥有一条狗以及喝淡啤酒，你可以改变 shouldRenderStars 的得出方式，而返回的内容保持不变。你还可以把这个逻辑放在其它可测试的地方，并且保持渲染明晰。

const shouldRenderStars = 
  stars > 0 && loggedIn && pet === 'dog' && beerPref === 'light`;

return (
  <div>
    {shouldRenderStars && (
      <div>
        {'☆'.repeat(stars)}
      </div>
    )}
  </div>
);

结论

我认为你应该充分利用这种语言。对于 JavaScript，这意味着为 if/else 条件式使用三元表达式，以及为 if 条件式使用 && 操作符。

我们可以回到每处都使用三元运算符的舒适区，但你现在消化了这些知识和力量，可以继续前进 && 取得成功了。

作者简介：

美国运通工程博客的执行编辑 http://aexp.io 以及 @AmericanExpress 的工程总监。MyViews !== ThoseOfMyEmployer.

via: https://medium.freecodecamp.org/conditional-rendering-in-react-using-ternaries-and-logical-and-7807f53b6935

作者：Donavon West 译者：GraveAccent 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

26 日，Facebook 发布了 React 16，并如之前承诺的，将 React 16 JavaScript 库以及 GraphQL 查询语言的许可证从原来的 BSD + 专利条款改为更受欢迎的 MIT 许可证。

正如 Facebook 工程总监 Adam Wolff 上周说的，“Facebook 未能说服开发者社区其 BSD + 专利条款的许可证是与开源需求所兼容的”，因此，在招致社区的抗议和抛弃，尤其是在发生了 Apache 基金会将 React 的许可证列入“X 类别”和 WordPress 弃用 React 事件之后，Facebook 表示愿意将这个重要的 JavaScript 基础框架更换成大家更欢迎的 MIT 许可证。

作为最广泛使用的用于构建 Web 用户界面的基础框架，React 的这一许可证的修改得到了社区的强烈反响，虽然有些不同意见，但是大部分人还是表示喜闻乐见——一方面代表了社区的胜利，另外一方面也可以避免大量的采用 React 的项目重写。

不过，也有一些人对 Facebook 采用 MIT 许可证表达了不同的看法。RedMonk 的创始人 Stephen O'Grady 表示，Facebook 采用不包括专利条款的 MIT 许可证，而没有采用包含了更弱的专利条款的 Apache 许可证，相比于原来的 BSD + 专利条款，按倒了葫芦起了瓢。“问题是，通过选择这种方式，Facebook 并没有像在 Apache 许可证下一样在 MIT 许可证中传达任何专利授权……如果 Facebook 在 React 申请了专利，换句话说，该软件的用户并没有被 MIT 许可证授予明确的许可，只有一个未经测试的隐含许可”。

此外，除了 React 16 换用了新的 MIT 之外， Facebook 也将前一天发布的 React 15.6.2 换用了 MIT 许可证，以便那些不方便升级 React 16 的用户使用。

而曾经被 Gitlab 由于该许可证条款而放弃的 GraphQL 也被修改了许可证。作为一个用于规定实现标准的规范，其现在被放在 开放式网络基金会协议 （ Open Web Foundation Agreement (OWFa) v1.0 ） 之下，并且现在 Facebook 的 GraphQL 实现也采用了 MIT 许可证发布。

作为一个广泛使用 JavaScript 框架，这次 React 16 的升级只有很少的破坏性改变，虽然其中大部分库都经过了重写。而新的 React 16 支持异步渲染，允许处理大型组件树而不会阻塞主执行线程。此外，还增加了一些屡屡被要求而难以添加的功能，比如使用错误边界进行异常捕获，和从渲染器返回多个组件。

而 React 16 中的服务器端渲染也要比之前的版本快得多，测试表明，其比 Node 4 快 2.4 倍，比 Node 6 快 3 倍，比 Node 8.4 快 3.8 倍。

就在几个小时前，Facebook 宣布，将在下周发布的 React 16 会以 MIT 许可证重新授权，以应对社区对之前的 BSD + 专利许可模式的不安。

Facebook 负责 React 和 GraphQL 等产品的产品架构组工程总监 Adam Wolff 写道：

“下周，我们将以 MIT 许可证对我们的开源项目 React、Jest、Flow 和 Immutable.js 重新进行许可。我们重新许可这些项目是因为 React 是广泛的互联网开源软件生态的基石，我们并不想因非技术原因而阻碍其前行的道路。”

React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，用来架设 Instagram 的网站。

• 2013 年 5 月，Facebook 将 React.js 开源。
• 2016 年 7 月，React.js 开源许可协议中的附加专利条款引发争议。
• 2016 年 11 月，Facebook 发布官方问答，对附加专利条款进行澄清。
• 2017 年 7 月，Apache 基金会禁止使用遵循 BSD 许可证 + 专利开源协议的 JAR 包。

在 Apache 基金会将 React 这样的采用 BSD 许可证 + 专利条款的软件列入“X 类别”之后，社区再次引发了对此问题强烈关注，并导致很多大型的互联网公司开始绸缪放弃和替换 React——尤其是在 WordPress 宣布将重写其软件，剥离对 React 的依赖之后达到了顶峰。而国内的互联网公司，如百度、阿里，也纷纷有传言将追随这一动作，弃用 React。

迫于这种压力，Facebook 决定对 React 等开源项目放弃其原有的 BSD 许可证 + 专利条款的许可模式，虽然他们认为“BSD 许可证 + 专利条款为项目的用户提供了一些好处”，但是他们也“承认没能说服社区接受这一许可模式”。

在感受到这一许可证的不确定性风险之后，许多团队开始选择替代性的产品。Facebook 对此感到抱歉，对 React 重新许可虽然不一定能赢得这些团队回心转意，但是还是“希望将这扇门继续打开”。

这一转变自然也会引起人们对 Facebook 其它的开源项目的质疑，因为目前 Facebook 许多流行的开源项目都采用的是 BSD 许可 + 专利条款方式。但是他们会“重新评估这些项目的许可证，而每个项目的情况有所不同，替换许可证取决于各种因素”。下周，除了 React 之外，Facebook 也将对 Jest、Flow 和 Immutable.js 等开源项目进行重新许可。

这一许可证的变化将随着下周即将发布的 React 16 一起更新。React 16 已经开发了一年，内部进行完全重写，解锁了强大的功能，让每个人都可以用它来构建大规模的用户界面。

Adam Wolff 表示，将许可证的讨论放到后面，无论大家用不用 React ，希望它都可以给开发者以灵感，毕竟，我们最关心的是：交付伟大的产品。