React 核心概念（4）

React 核心概念（4）

 

1.表单

 

1.1 表单概述

 
这里先给出一个简单的表单示例：

import React from 'react';

class FormComp extends React.Component {
  constructor (props) {
    super(props);
  }

  render () {
    return (
      <form>
        <label htmlFor="username">用户名：</label>
        <input id="username" type="text" name="username" />
        <input type="submit" value="提交" />
      </form>
    )
  }
};

export default FormComp;

此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。在 React 中执行此代码，它依然有效。

 
但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。（引自： React 表单 ）

 

1.2 受控组件

 
表单元素： <input>、 <textarea> 和 <select> 等

 
在 React 中，这些表单元素不再自己维护 state，而是统一保存在 this.state 中，并且只能通过 this.setState() 来修改。

 
那么受控组件具体应该是什么样子的呢，来看看下面的代码：

import React from 'react';
class FormComp extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      username: '',
      password: '',
    }
  }
  changeUserName = (e) => {
    const { target: { value = '', name } } = e;
    this.setState({
      [name]: value,
    });
  }
  render () {
    return (
      <form>
        <label htmlFor="username">用户名：</label>
        <input
          id="username"
          type="text"
          name="username"
          value={this.state.username}
          onChange={this.changeUserName}
        />
        <br />
        <label htmlFor="password">密码：</label>
        <input
          id="password"
          type="password"
          name="password"
          value={this.state.password}
          onChange={this.changeUserName}
        />
        <br />
        <input type="submit" value="提交" />
      </form>
    )
  }
};
export default FormComp;

上面的代码是通过一开始的简单示例改动的，可以看到，通过在表单元素 input 上增加 value 属性及onChange 函数，从而实现：统一在 this.state 中保存 state，并且只能通过 this.setState() 来修改。这就是一个受控的表单元素。

 
注1：上述提到的 state ，这是一个统称，例如在 input 标签中，其表现为 value 值。类似的还有<textarea> 和 <select> 这些，都是接受一个 value 属性，可以使用它来实现受控组件。

 
注2：代码中有这么一段

this.setState({
  [name]: value,
});

这里使用了 ES6 计算属性名称的语法更新给定输入名称对应的 state 值。

 

1.3 上传文件（ input ）

 
在 HTML 中，<input type=“file”> 允许用户从存储设备中选择一个或多个文件，将其上传到服务器，或通过使用 JavaScript 的 文件上传 API 进行控制。

<input type="file" />

因为它的 value 只读，所以它是 React 中的一个非受控组件。

 

1.4 受控输入空值

 
在受控组件上指定 value 的值会阻止用户更改输入。

<input
  id="password"
  type="password"
  name="password"
  value="password_value"
  onChange={this.changeUserName}
/>

 
这里将上面代码中密码输入框的 value 固定写为 password_value 的字符串 ，这样再去视图中去修改密码输入框时会发现，无论怎么输入或者删除，都无法更改当前的值。

 
注：如果你指定了 value，但输入仍可编辑，可能是你意外地将value 设置为 undefined 或 null。
下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）

 

1.5 小结

并不是说受控组件就是最好的，在合适的场景选择合适的方法才是最好的。例如当你需要输入一些文本（用户名，密码时），你可以使用受控组件；但是当你需要上传文件时，你需要的只是一个非受控组件即可。

 

2.状态提升

 
通常，多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。（ 引自： React 状态提升 ）

 
在不同子组件中需要使用同一个 state ，应当依靠的是自上而下的数据流。 即在共同父组件中维护 state 变量，然后通过 props 传入子组件中，而子组件只用考虑如何渲染。

 
下面给出一个简单的示例：

 
父组件：

import React from 'react';
import Child1 from './Child1';
import Child2 from './Child2';

class Parent extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0,
    }
  }
  increase = () => {
    const { count } = this.state;
    this.setState({
      count: count + 1,
    });
  }
  render () {
    return (
      <>
        <Child1 count={this.state.count} />
        <br />
      	<Child2 count={this.state.count} />
        <br />
        <button onClick={this.increase}>点击</button>
      </>
    )
  }
} 
export default Parent;

 
子组件1：

import React from 'react';

class Child1 extends React.Component {
  constructor (props) {
    super(props);
  }
  render () {
    return (
      <>
        {this.props.count}个 child 1
      </>
    )
  }
} 
export default Child1;

 
子组件2：

import React from 'react';

class Child2 extends React.Component {
  constructor (props) {
    super(props);
  }
  render () {
    return (
      <>
        {this.props.count}个 child 2
      </>
    )
  }
} 
export default Child2;

 
更多关于状态提升可查阅： React 状态提升

 

3.组合与继承

 
React 中推荐使用组合的方式而非继承的方式来实现代码的复用。

 
在 React 中组件的 props 有一个默认的特殊属性：children

这使得别的组件可以通过 JSX 嵌套，将任意组件作为子组件传递给它们。

// 父组件
import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  render () {
    return (
      <>
        <Child>
          <h1>标题</h1>
          <p>内容</p>
        </Child>
      </>
    )
  }
} 
export default Parent;

// 子组件
import React from 'react';

class Child extends React.Component {
  constructor (props) {
    super(props);
  }
  render () {
    return (
      <>
        {this.props.children}
      </>
    )
  }
} 
export default Child;

 
父组件中 Child 标签中的所有内容都会作为一个 children prop 传递给 Parent 组件

 
**当然也可以不使用 children，可以自定义属性。**这是因为虽然此种方式类似于“槽”的概念，但是在 React 中没有“槽”这个概念这一限制，可以将任何东西作为 props 进行传递。