持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

React 初探

React 是一个用于构建用户界面的 JavaScript 库，核心专注于视图，目的实现组件化开发

组件化的概念

组件化是指**解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。

我们可以很直观的将一个复杂的页面分割成几个独立功能块，每个功能块有自己独立的样式、逻辑。我们可以根据页面需求拼装成一个复杂的页面。这样不仅仅可以减少逻辑的复杂度，又实现了代码的重用。

• 可组合：一个组件可以和另一个组件进行拼装使用
• 可重用：每个组件都是具有独立功能，他可以被使用在多个场景中
• 易维护：能组件就包含自己独立的逻辑，更容易维护

搭建React开发环境

cnpm i create-react-app -g
create-react-app react-demo
cd react-demo
npm start

JSX

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

在 JSX 中嵌入表达式

在下面的示例中，我们将调用 JavaScript 函数 hello(user) 的结果，并将结果嵌入到 <h1> 元素中。

function hello(name) {
  return `Hello ${name}`;
}

const element = (
  <h1>
    Hello, {hello('World')}!  </h1>
);

用一个表达式书写 JSX

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

function getGreeting(value) {
  if (value) {
    const list = () => {
      const res = [];
      for (var i = 0; i < value; i++) {
        res.push(<h2 key={i}>hello {i}</h2>)
      }
      return res
    }
    return (
      <div>Hello, {list()} </div>
    )
  }
  return <h1>Hello, Stranger.</h1>;
}

你还可以用 JSX 表示对象

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

以上代码 等于 以下代码

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX 中指定属性

相信熟悉使用vue的同学应该很熟悉

<a :href="url"> link </a>;

jsx 中也有类似的语法

<a href="{url}"> link </a>;

不过是将 :xxx="" 变成了 xxx="{}"