从零开始学习react

1.什么是react

1.react是一个用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

2.react的特点：

声明式，组件化和一次学习随处编写。

3.react学习的内容：

（1）jsx语法：是javascript扩展的意思，相当于 js+xml其原理是：

React.creatElement(tag,{attrs},content)

（2）组件：react的组件可以分为类组件和无状态组件：类组件的创建如下：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping </h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

无状态组件的创建如下：

function App() {
  return (
    <div className="App">
      <Todo></Todo>
    </div>
  );
}

无状态组件和类组件又可以根据受控状态分为受控组件和非受控组件：

受控组件：在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}

非受控组件：

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

（3）路由的使用：

1.首先安装路由插件 npm i react-roueter

2.在index.js中引入路由

{/*在react中有两种路由模式：哈希路由和历史记录路由，这里以历史记录路由为例*/}
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById("root")
);

3.在app.js中使用路由：

import { NavLink, Route, Redirect, Switch, Router } from "react-router-dom";
<div className="App">
      <NavLink to="/shouye">首页</NavLink>
      <NavLink to="/nei">内容</NavLink>
      <NavLink to="/login"></NavLink>
      {/* <NavLink to="/login">首页</NavLink> */}
      <Switch>
        <Route path="/shouye" component={Shouye}></Route>
        <Route path="/login" component={Login}></Route>
        <Route path="/nei" component={Nei}></Route>
        <Redirect from="/" to="/shouye" exact />
      </Switch>

（4）状态管理：state可以对组件状态进行管理，而要修改state必须使用setState，如下例：

class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            n: 1,
          };
          this.change = this.change.bind(this);
          // 如果不使用这种绑定this的方法需要把render里面的函数变成箭头函数
        }
        render() {
          return (
            <div>
              <button onClick={this.gai.bind(this, -1)}>减</button>
              <input type="text" value={this.state.n} />

              <button onClick={this.change.bind(this, 1)}>加</button>
            </div>
          );
        }
        change(p) {
          this.setState({
            n: this.state.n + p,
          });
        }
        gai = p => {
          this.setState({
            n: this.state.n + p,
          });
        };
      }

      ReactDOM.render(<App />, document.getElementById("box"));

注：setstate是一个异步操作，并且写多个setState的话会发生合并的现象，解决这种方法可以用

this.setState（(prevState,props)=>{
    return {
        key:prevState+value
   }
}）

（5）第三方插件

这个可以根据插件库的用法结合react快速的开发。

如有疑问可以访问react官网：https://zh-hans.reactjs.org/
本文参考于https://zh-hans.reactjs.org/