react文档阅读笔记（一）

1.Hello World

一个简单的react的例子

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

它渲染了一个 “Hello, world!” 的标题。

React是一个JavaScript库

2.JSX简介

 下面是一个JSX， 它是一种 JavaScript 的语法扩展，完全是在 JavaScript 内部实现的。 

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

在 JSX 中使用表达式

在 JSX 当中的表达式要包含在大括号里。 

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX 本身其实也是一种表达式

在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。

这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 属性

你可以使用引号来定义以字符串为值的属性：

const element = <div tabIndex="0"></div>;

也可以使用大括号来定义以 JavaScript 表达式为值的属性：

const element = <img src={user.avatarUrl}></img>;

JSX 嵌套

如果 JSX 标签是闭合式的，那么你需要在结尾处用 />, 就好像 XML/HTML 一样：

const element = <img src={user.avatarUrl} />;

JSX 标签同样可以相互嵌套：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

下面两种代码的作用是完全相同的：

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

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

React.createElement() 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

3.元素渲染

元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容：

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

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>:

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

在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 “根” DOM 节点。

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

页面上会展示出 “Hello World” 字样。

更新元素渲染

更新界面的唯一办法是创建一个新的元素，然后将它传入 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);

这个示例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render().

React 只会更新必要的部分

React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

4.组件 & Props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

函数定义/类定义组件

函数定义组件

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

 ES6 class 

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件渲染

在前面，我们遇到的React元素都只是DOM标签：

const element = <div />;

然而，React元素也可以是用户自定义的组件：

const element = <Welcome name="Sara" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

例如,这段代码会在页面上渲染出”Hello,Sara”:

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

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

我们来回顾一下在这个例子中发生了什么：

1. 我们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
2. React将{name: 'Sara'}作为props传入并调用Welcome组件。
3. Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4. React DOM将DOM更新为<h1>Hello, Sara</h1>。

组合组件

组件可以在它的输出中引用其它组件，这就可以让我们用同一组件来抽象出任意层次的细节。在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。

例如，我们可以创建一个App组件，用来多次渲染Welcome组件：

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

提取组件

你可以将组件切分为更小的组件，这没什么好担心的。

例如，来看看这个Comment组件：

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

简单的提取一下

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。来看这个sum函数：

function sum(a, b) {
  return a + b;
}

类似于上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

所有的React组件必须像纯函数那样使用它们的props。