React入门（一）

React

---

一. js复习

重新理解javascript(适合快速浏览复习闭包等基础的js知识)。快速复习js特性

---

二. JSX简介

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

const element = (
  

    Hello, {formatName(user)}!
  
);

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

const element = 
;

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

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()这个钩子函数，定时器也就会被清除。

4. 正确地使用状态

关于 setState() 这里有三件事情需要知道

• 不要直接更新状态
  例如，此代码不会重新渲染组件,应当使用 setState():：

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

• 状态更新可能是异步的
  React 可以将多个setState() 调用合并成一个调用来提高性能。
  this.props 和 this.state 可能是异步更新的，不应该依靠它们的值来计算下一个状态。
  例如，此代码可能无法更新计数器：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

应使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

// Correct
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

• 状态更新合并
  调用 setState() 时，React 将你提供的对象合并到当前状态

5. 数据自顶向下流动