React.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

JSX

  • 使用{ }插入JS表达式。
  • 表达式返回null时不插入。
  • 可以将JSX元素作为变量传递。
  • 使用htmlFor来指明html的for属性。

React Component

  • 自定义的组件名以大写开头。
  • 有且只有一个最外层元素。
  • 组件可以相互嵌套。

事件监听

https://reactjs.org/docs/events.html#supported-events

  • on*事件监听未经过特殊处理只能用于普通HTML标签。
  • 要在事件中获取实例时,需要bind。onClick={this.handleClickOnText.bind(this)}

State

使用this.statethis.setState()来管理状态。

class LikeButton extends Component {
  constructor() {
    super();
    this.state = {
      isLiked: false
    };
  }

  handleOnClick() {
    this.setState({
      isLiked: !this.state.isLiked
    });
  }

  render() {
    return (
      <div onClick={this.handleOnClick.bind(this)}>
        {this.state.isLiked ? "Like" : "DisLike"}
      </div>
    );
  }
}
  • this.setState()接收对象或函数。
  • 使用this.setState()时,只需传入要修改的部分。
  • setState()并不会马上修改值,而是将修改放入更新队列中。这样,无法使用修改后的值来做新的运算。
  • 如果后一个操作需要前面this.setState()更新的值,可以使用接收函数作为参数的setState(),在函数中返回对象;注意此时this.setState()仍然只更新一次。

    js this.setState((prevState) => { return { count: prevState.count + 1 }; });

  • 存在setState合并机制,不必担心性能问题。

Props 拓展属性

  • 使用JSX组件时,所有放置在参数中的属性会被传入当成props的键值对。

    ```js class LikeButton extends Component { render() { const textA = this.props.textA || "Text A"; const textB = this.props.textB || "Text B"; return (

    {textA}

    {textB}

    ); } }

    ReactDOM.render(, document.getElementById("root")); ```

  • 可以使用defaultProps来指定初始值。

    ```js class LikeButton extends Component { static defaultProps = { textA: "Text A", textB: "Text B" }

    render() {
        const textA = this.props.textA;
        const textB = this.props.textB;
        return (
            <div>
                <p>{textA}</p>
                <p>{textB}</p>
            </div>
        );
    }
    

    } ```

  • props不可变,只能重新渲染。

函数式组件

React鼓励使用props而不是state,因为过多的状态管理会带来性能问题。

函数式组件是只能接收props和返回render方法的函数。

const MakeSound = (props) => {
    const sound = props.sound || "Wha...";
    return (
        <p>{sound}</p>
    )
}

渲染数组元素

存放JSX的数组会被一个一个罗列并渲染。

const users = [
  { name: "Jackson", age: 22 },
  { name: "Tomas", age: 24 },
  { name: "Jelly", age: 25 }
];

class UserList extends Component {
  render() {
    return (
      <div> {
        users.map((user) => {
          return (
            <div key={user.name}>
              <p>姓名{user.name}</p>
              <p>年龄{user.age}</p>
            </div>
          );
        })
      }
      </div>
    );
  }
}

为了使用Virtual-DOM的优化机制,每个列表项应该有一个全局唯一的keyHTML属性。

处理用户输入

  • 受控组件 所有的状态都由state控制。

信息传递

  • 状态提升 由上层组件来管理信息。更好的方式是使用Redux
  • 借助下层组件的props属性来组织重新渲染。

不推荐的写法:(其实影响也不大。)

this.state.comments.push(comment);
this.setState({
  comments: this.state.comments
});

推荐的写法:

const comments = this.state.comments.slice();
comments.push(comment);
this.setState({
  comments: comments
});

挂载组件的生命周期

constructor()
componentWillMount()
render()
// <= 构造DOM元素并插入页面
componentDidMount()
componentWillUnmound()

更新阶段的生命周期

shouldComponentUpdate(nextProps, nextState)  // 如果返回false就不会继续渲染

深入了解需要参考官网文档。

使用ref获取DOM元素的引用

<Input ref={(input) => this.input = input} />

使用create-react-app快速新建单页面项目

npx create-react-app <app-name>