响应式系统与 React 进阶 | 青训营

ZhenYuChen2000
68 阅读5分钟

React的单向数据绑定

单项数据绑定

在 Vue 中，可以通过 v-model 指令来实现双向数据绑定。但是，在 React 中并没有指令的概念，而且 React 默认不支持 双向数据绑定。

React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存。

React中，只支持单项数据绑定，不支持双向数据绑定。不信的话，我们来看下面这个例子：

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "这是 MyComponent 组件 默认的msg"
    };
  }

  render() {
    return (
      <div>
        <h3>么么哒</h3>
        <input type="text" value={this.state.msg} />
      </div>
    );
  }

}

上方代码中，我们尝试在 input文本框中读取 state.msg 的值，运行结果中，却弹出了警告：

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

通过onChange方法，实现双向数据绑定

如果针对 表单元素做 value 属性绑定，那么，必须同时为 表单元素 绑定 readOnly, 或者提供 onChange 事件：

  • 如果是绑定readOnly，表示这个元素只读，不能被修改。此时，控制台就不会弹出警告了。
  • 如果是绑定onChange，表示这个元素的值可以被修改，但是，要自己定义修改的逻辑。

绑定readOnly的举例如下：（表示value中的数据是只读的）

	<input type="text" value={this.state.msg} readOnly />

绑定 onChange 的举例如下：（通过onChange方法，实现双向数据绑定）

(1)index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

（2）main.js:

// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

// 导入组件
import MyComponent from "./components/MyComponent.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
  <div>
    <MyComponent></MyComponent>
  </div>,
  document.getElementById("app")
);

（3）components/MyComponent.jsx

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "这是组件 默认的msg"
    };
  }

  render() {
    return (
      <div>
        <h1>么么哒</h1>
        <input
          type="text" value={this.state.msg} onChange={this.txtChanged} ref="txt" />
        <h3>{"实时显示msg中的内容：" + this.state.msg}</h3>
      </div>
    );
  }

  // 为 文本框 绑定 txtChanged 事件
  txtChanged = (e) => {
    // 获取 <input> 文本框中 文本的3种方式：
    //  方式一：使用 document.getElementById

    //  方式二：使用 ref
    // console.log(this.refs.txt.value);

    //  方式三：使用 事件对象的 参数 e 来拿
    // 此时，e.target 就表示触发 这个事件的 事件源对象，得到的是一个原生的JS DOM 对象。在这个案例里，e.target就是指文本框
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    });
  };
}

React路由的使用

React路由的使用

使用React路由之前，我们需要先安装 react-router-dom这个包。比如：

yarn add react-router-dom

代码举例：

（1）index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  <div id="app"></div>
</body>

</html>

（2）main.js：

// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";

import App from "./App.jsx";

// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(<App />, document.getElementById("app"));

（3）app.jsx:

import React from "react";

// 如果要使用 路由模块，第一步，运行 yarn add react-router-dom
// 第二步，导入 路由模块

// HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就好了；
// Route 表示一个路由规则， 在 Route 上，有两个比较重要的属性， path   component
// Link 表示一个路由的链接 ，就好比 vue 中的 <router-link to=""></router-link>
import { HashRouter, Route, Link } from "react-router-dom";

import Home from "./components/Home.jsx";
import Movie from "./components/Movie.jsx";
import About from "./components/About.jsx";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    // 当 使用 HashRouter 把 App 根组件的元素包裹起来之后，网站就已经启用路由了
    // 在一个 HashRouter 中，只能有唯一的一个根元素
    // 在一个网站中，只需要使用 唯一的一次 <HashRouter></HashRouter> 即可
    return (
      <HashRouter>
        <div>
          <h1>这是网站的APP根组件</h1>
          <hr />

          <Link to="/home">首页</Link>&nbsp;&nbsp;
          <Link to="/movie">电影</Link>&nbsp;&nbsp;
          <Link to="/about">关于</Link>
          <hr />

          {/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */}
          {/* 在 vue 中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在 react-router 中，并没有类似于这样的标签，而是 ，直接把 Route 标签，当作的 坑（占位符） */}
          {/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是 一个占位符，表示将来匹配到的组件都放到这个位置 */}
          <Route path="/home" component={Home} />
          <hr />
          <Route path="/movie" component={Movie} />
          <hr />
          <Route path="/about" component={About} />
        </div>
      </HashRouter>
    );
  }
}

（4）ReactDemo/src/components/Home.jsx

import React from "react";

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div>Home组件</div>;
  }
}

（5）ReactDemo/src/components/Movie.jsx


import React from "react";

export default class Movie extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
      }

  render() {
    return <div>Movie组件</div>;
  }
}

（6）ReactDemo/src/components/About.jsx

import React from "react";

export default class About extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <div>About组件</div>;
  }
}

匹配路由参数

模糊匹配与精准匹配

我们在上面的代码中，进一步修改。假设 Movie 这个组件修改成这种路由匹配方式：

<Link to="/movie/top250">电影</Link>

<Route path="/movie" component={Movie} />

上面这种匹配方式，也是可以成功匹配到的。这是为啥呢？

这是因为：默认情况下，路由中的匹配规则，是模糊匹配的。如果 路由可以部分匹配成功，就会展示这个路由对应的组件。

如果想让路由规则，进行精确匹配，可以为Route添加 exact 属性。比如下面这种写法，因为是开启了精准匹配，所以是匹配不到的：（无法匹配）

<Link to="/movie/top250/20">电影</Link>

<Route path="/movie/" component={Movie} exact/>

另外，如果要匹配参数，可以在匹配规则中，使用 : 修饰符，表示这个位置匹配到的是参数。举例如下：（匹配正常）

<Link to="/movie/top250/20">电影</Link>&nbsp;&nbsp;

<Route path="/movie/:type/:id" component={Movie} exact/>

获取路由参数

继续修改上面的代码。如果我想在 Movie 组件中显示路由中的参数，怎么做呢？

我们可以通过 props.match.params获取路由中的参数。举例做法如下：

app.jsx中的匹配规则如下：

<Link to="/movie/top100/5">电影</Link>&nbsp;&nbsp;

<Route path="/movie/:type/:id" component={Movie} exact/>

Moivie 组件的写法如下：

import React from "react";

export default class Movie extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      routeParams: props.match.params // 把路由中的参数保存到 state 中
    };
  }

  render() {
    console.log(this);
    // 如果想要从路由规则中，提取匹配到的参数，进行使用，可以使用 this.props.match.params.*** 来访问
    return (
      <div>
        {/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}
        Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}
      </div>
    );
  }
}
avatar
文章
阅读
粉丝