react学习

2019-05-20  本文已影响0人  kiterumer
react

JSX

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

为了便于阅读，我们会将 JSX 拆分为多行，建议将内容包裹在括号中

你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX

你可以通过使用引号，来将属性值指定为字符串字面量：

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

也可以使用大括号，来在属性值中插入一个 JavaScript 表达式：

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

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。你应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

注意：
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。


const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
  )
  
  //两种代码完全等效
const element = React.createElement(
//接受三个参数，标签名，属性参数对象，子元素
  'h1',
  {className: 'greeting'},
  'Hello, world!'
  )

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

元素渲染

元素是构成 React 应用的最小砖块

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

仅使用 React 构建的应用通常只有单一的根 DOM 节点

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

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：

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

在实践中，大多数 React 应用只会调用一次 ReactDOM.render()

React 只更新它需要更新的部分.

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

考虑 UI 在任意给定时刻的状态，而不是随时间变化的过程，能够消灭一整类的 bug

组件&Props

独立，可复用，单独构思

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件与class组件

用函数定义组件

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

用ES6语法的class定义组件：

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

上面两者等效

如何将函数组件转换成class组件：

  1. 创建一个同名的 ES6 class，并且继承于 React.Component。
  2. 添加一个空的 render() 方法。
  3. 将函数体移动到 render() 方法之中。
  4. 在 render() 方法中使用 this.props 替换 props。
  5. 删除剩余的空函数声明。

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。

关键词：props

组合组件

组件可以在其输出中引用其他组件。
用同一组件来抽象出任意层次的细节。

通常来说，每个新的 React 应用程序的顶层组件都是 App 组件。

Props的只读性

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。

纯函数：不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

State&生命周期

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。


class Clock extends React.Component {
  constructor(props) {
    super(props);    
    this.state = {date: new Date()};  }

  render() {
    return (
      <div>        
        <h1>Hello, world!</h1>        
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>             </div>
    )
  }
 }
 
 
ReactDOM.render(  
<Clock />, 
document.getElementById('root')
)

Class 组件应该始终使用 props 参数来调用父类的构造函数。

class 组件声明一些特殊的方法，当组件挂载或卸载时就会去执行这些方法,叫做“生命周期方法”

componentDidMount和componentWillUnmount

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

正确地使用State

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

让setState()接受一个函数而不是一个对象。

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

//普通函数写法
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

数据是向下流动的

组件可以选择把它的 state 作为 props 向下传递到它的子组件中。

任何的 state 总是所属于特定的组件，而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

如果你把一个以组件构成的树想象成一个 props 的数据瀑布的话，那么每一个组件的 state 就像是在任意一点上给瀑布增加额外的水源，但是它只能向下流动。

事件处理

在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。


class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`，这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);  }

  handleClick() {    this.setState(state => ({      isToggleOn: !state.isToggleOn
    }));  }
  render() {
    return (      <button onClick={this.handleClick}>        {this.state.isToggleOn ? 'ON' : 'OFF'}      </button>
    );
  }}

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

你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined.

使用 class fields 正确的绑定回调函数：


class LoggingButton extends React.Component {  // 此语法确保 `handleClick` 内的 `this` 已被绑定。  // 注意: 这是 *实验性* 语法。  
handleClick = () => {    console.log('this is:', this);  }
  render() {
    return (
      <button onClick={this.handleClick}>        Click me      </button>
    );
  }}

或者在回调中使用箭头函数：


class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {   
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。   
  return (      
  <button onClick={(e) => this.handleClick(e)}>        Click me      
  </button>
    );
  }}

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

上一篇下一篇

猜你喜欢

热点阅读