

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.state和this.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>