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. 数据自顶向下流动

你可能感兴趣的:(React入门(一))