Reactjs初探

简介

因为公司业务的需要，测试工程师小毛在完成自己测试工作的同时，需要开发一个android应用展示我们的数据的业务。小毛用了React native 来快速开发android。十分方便。因为本人在第一家公司做过一些前端方面的工作，之前公司和我搭档的同事现在也在研究React，但是我问他之后，才知道原来不是一码事，他研究是Reactjs。

ReactJs和React Native

ReactJs和React Native的原理是相同的，都是由js实现的虚拟dom来驱动界面view层渲染。

只不过ReactJs是驱动html dom渲染； React Native是驱动android/ios原生组件渲染。

其实在React Native推出之前，就已经存在这种使用js驱动app原生组件的技术了，比如Native Script。

Reactjs的学习

Facebook这条大腿支撑着React的开发，在项目活跃度和质量上自然是可以得到保证的。就好比Angular背后有Google一样，相比之下，Ember.js就薄弱了不少，尽管有@wycats、@tomdale这样的大牛，但是毕竟个人和大企业还是不能相比的。

Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

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

    </script>
  </body>
</html>

它在页面上呈现一个标题“Hello World”的标题。

介绍JSX

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是HTML。

它被称为JSX，它是JavaScript的语法扩展。我们建议您使用React来描述UI的外观。 JSX可能会提醒您一种模板语言，但它具有JavaScript的全部功能。

渲染元素

要将React元素渲染到根DOM节点中，请将它们都传递给ReactDOM.render（）：

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

组件和属性

组件让您将UI拆分成独立，可重复使用的部分，并单独考虑每个部分。

在概念上，组件就像JavaScript函数。他们接受任意输入（称为“属性”），并返回描述应该在屏幕上显示的React元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

状态和生命周期

到目前为止，我们只学到了一种更新UI的方法。

我们调用ReactDOM.render（）来更改渲染的输出：

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);

时钟程序

处理事件

处理事件在普通html中和用reactjs调用的区别
html中：

<button onclick="activateLasers()">
  Activate Lasers
</button>

Reactjs中

<button onClick={activateLasers}>
  Activate Lasers
</button>

另一个区别是您不能返回false以防止在React中的默认行为。您必须显式调用preventDefault。

条件渲染

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

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')
);

数组和键值

数组遍历

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

添加key的数组遍历

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

表单

HTML表单元素与React中的其他DOM元素有所不同，因为表单元素自然保持一些内部状态。

在HTML中，诸如input，textarea和select三种标签的表单元素通常保持自己的状态，并根据用户输入进行更新。在React中，可变状态通常保存在组件的状态属性中，并且只能使用setState（）进行更新。

我们可以把React状态成为“真理的单一来源”来结合两者。然后，呈现表单的React组件也控制在后续用户输入时该表单中发生的情况。以这种方式，其值由React控制的输入表单元素称为“受控组件”。

Lifting State Up
Composition vs Inheritance
Thinking In React

参考

Reactjs官网

简介