React入门（一） React入门（一）

React 一. js复习
【React入门（一）】重新理解javascript(适合快速浏览复习闭包等基础的js知识)。快速复习js特性
二. JSX简介

一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

const element = (Hello, {formatName(user)}!);

推荐在 JSX 代码的外面扩上一个小括号
在 JSX 当中的表达式要包含在大括号里
JSX属性
- 使用引号来定义以字符串为值的属性：
- 使用大括号来定义以 JavaScript 表达式为值的属性：

const element = ;

JSX嵌套,JSX 标签是闭合式的，那么你需要在结尾处用 />,可以相互嵌套
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称。例如，class 变成了 className，而 tabindex 则对应着 [tabIndex]
JSX 防注入攻击，可以放心地在 JSX 当中使用用户输入：
React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
JSX 代表 Objects，Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法
React 元素：它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

// 注意: 以下示例是简化过的 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };

三. 元素渲染
1. react元素元素是构成 React 应用的最小单位。
元素用来描述你在屏幕上看到的内容，事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
2. 将元素渲染到 DOM 中

用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

ReactDOM.render()，要将React元素渲染到根DOM节点中，我们通过把它们都传递给此方法来将其渲染到页面上：

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

3. 更新元素渲染

React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子
在实际生产开发中，大多数React应用只会调用一次 ReactDOM.render(), 有状态组件可以实现 DOM 更新方式
React 只会更新必要的部分

四. 组件 & Props
1. 函数定义/类定义组件

接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

function Welcome(props) { return Hello, {props.name}; }

也可以使用 ES6 class 来定义一个组件:

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

2. 组件渲染

React元素除了DOM标签，也可以是用户自定义的组件：

const element = ;

组件名称必须以大写字母开头。
组件的返回值只能有一个根元素。这也是我们要用一个来包裹所有元素的原因。

3. Props的只读性

所有的React组件必须像纯函数那样使用它们的props。
上面的这种函数称为“纯函数”，它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。

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

五. State & 生命周期
1.将函数转换为类

定义为类的组件有一些特性。局部状态就是如此：一个功能只适用于类
状态与属性十分相似，但是状态是私有的，完全受控于当前组件。

class Clock extends React.Component { render() { return (Hello, world! It is {this.props.date.toLocaleTimeString()}.); } }

2. 为一个类添加局部状态

添加一个类构造函数来初始化状态 this.state, 将 date 从属性移动到状态中

class Clock extends React.Component { constructor(props) { super(props); //传递 props 到基础构造函数的 this.state = {date: new Date()}; }render() { return (Hello, world! It is {this.state.date.toLocaleTimeString()}.); } } ReactDOM.render( , document.getElementById('root') );

3. 将生命周期方法添加到类中

挂载: 每当Clock组件第一次加载到DOM中的时候，我们都想生成定时器，执行 componentDidMount() 钩子
卸载: 每当Clock生成的这个DOM被移除的时候，我们也会想要清除定时器，在 componentWillUnmount()生命周期钩子中卸载
可以在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码，这些方法被称作生命周期钩子。

class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; }componentDidMount() { this.timerID = setInterval( () => this.tick(),//在 this 中保存定时器ID,如果需要存储不用于视觉输出的东西，则可以手动向类中添加其他字段。 1000 ); }componentWillUnmount() { clearInterval(this.timerID); //如果你不在 render() 中使用某些东西，它就不应该在状态中,我们将在 componentWillUnmount()生命周期钩子中卸载计时器： }tick() { this.setState({ date: new Date()//实现了每秒钟执行的 tick() 方法,它将使用 this.setState() 来更新组件局部状态 }); }render() { return (Hello, world! It is {this.state.date.toLocaleTimeString()}.); } }ReactDOM.render( , document.getElementById('root') );

快速回顾一下发生了什么以及调用方法的顺序:
- 当被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。我们稍后会更新此状态。
- React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。
- 当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。
- 浏览器每秒钟调用 tick() 方法。在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。
- 一旦Clock组件被从DOM中移除，React会调用componentWillUnmount()这个钩子函数，定时器也就会被清除。