React文档学习(1)

从去年10月开始使用react，在使用过程中一直不断地更新自己对react的认知，发现很多东西是之前看文档没有注意到的。现在再看一遍文档，用于解答一些自己在项目中的疑惑。
基础篇

函数式组件和类组件

定义组件方式1：JS函数

1
2
3

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

定义组件的方式2：ES6的class

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

异步更新State

为了优化性能，有可能会将多个 setState() 调用合并为一次更新。接收一个函数，而不是一个对象。

// 	写法1：es6箭头函数
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
// 写法2：常规函数
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

处理事件

this指向的问题

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // 这个绑定是必要的，使`this`在回调中起作用
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}
ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

以下两种方法可以不用绑定

方法1：属性初始化语法

class LoggingButton extends React.Component {
  // 这个语法确保 `this` 绑定在 handleClick 中。
  // 警告：这是 *实验性的* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

方法2：在回调中使用箭头函数

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }
  render() {
    // 这个语法确保 `this` 被绑定在 handleClick 中
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

条件渲染

防止组件渲染

function WaringBanner(props){
    if(!props.warn){
        return null;
    }
}

List和Keys

一个好的经验准则是元素中调用 map() 需要 keys 。
在数组中使用的 keys 必须在它们的同辈之间唯一。然而它们并不需要全局唯一。

表单

file input标签

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(
      this
    );
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.files[0].name
      }`
    );
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input
            type="file"
            ref={input => {
              this.fileInput = input;
            }}
          />
        </label>
        <br />
        <button type="submit">
          Submit
        </button>
      </form>
    );
  }
}

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

状态提升

状态提升：同一个数据的变化需要几个不同的组件来反映。我们建议提升共享的状态到它们最近的祖先组件中。

将组件中原本的state改成props，将原本的setState方法改成props传入的方法

handleChange=(e)=> {
    this.props.onTemperatureChange(e.target.value);
  }
<input onChange={this.handleChange} />

在xm项目首页编写应用的组件中，需要在点击组件后，跳到不同的页面

// 原本
homeSource = (e) => {
    e.preventDefault();
    this.props.homeSource(this.props.sourceType);
  }
<Button onClick={this.homeSource}></Button>
// 也可以这样写
homeSource = (e, sourceType) => {
    e.preventDefault();
    this.props.homeSource(sourceType);
  }
 <Button onClick={e => this.homeSource(e, this.props.sourceType)}></Button>

组件元素也是可以作为props进行传递

React编程思想

对于数据，判断应该是state和props的关键点：
1. 是否通过 props(属性) 从父级传入？如果是这样，它可能不是 state(状态) 。
2. 是否永远不会发生变化？如果是这样，它可能不是 state(状态)。
3. 是否可以由组件中其他的 state(状态) 或 props(属性) 计算得出？如果是这样，则它不是 state(状态)。