(二)最简单的React教程,开发自己的电影网站:React基本用法

avatar

惯例,先介绍一下react的基本用法

语法

react里用的是 jsx,其实就是在js里写html,有兴趣的可以去看一下这篇文章 https://reactjs.org/docs/introducing-jsx.html

看一下 App.js 内容,基本上就长这个样

import React, { Component } from 'react';
import logo from '../assets/logo.svg';
import './css/App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

有一点要注意,class是个关键字,所以在react项目里所有的html类样式的class 都要换成 className

生命周期

从网上找了一张图 image

看着复杂,只需要记住三个方法基本就够用了

  • constructor() 组件构造方法
  • componentDidMount() 组件加载完成后调用的方法
  • render() 每次组件的状态(state)有变动时会自动调用的方法

一般调用接口的方法就放在 componentDidMount

展示数据

react里展示数据跟js写法也差不多,它没有vue里的指令,下面说一下用法

import React, { Component } from 'react';
import AppChild from './AppChild';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      books: [
        { name: 'Java' },
        { name: 'NodeJS' },
        { name: 'Python' },
      ]
    }
  }

  render() {
    return (
      <div className="App">
        <p>App</p>
        <AppChild name="world" />
        {this.state.loading ? <div>loading...</div> : null}
        <ul>
          {
            this.state.books.map(v => {
              return <li>{v.name}</li>
            })
          }
        </ul>
      </div>
    );
  }
}

export default App;

这里总结一下,一般做if判断的,都是用三目运算,涉及到数组循环的都是用 map() 函数

父组件给子组件传值

react里父组件给子组件传值用的是 prop 看一下下面这个例子就明白了

父组件 App.js

import React, { Component } from 'react';
import AppChild from './AppChild';

class App extends Component {

  render() {
    return (
      <div className="App">
        <p>App</p>
        <AppChild name="world" />
      </div>
    );
  }
}

export default App;

子组件

import React, { Component } from 'react';

class AppChild extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: this.props.name
    }
  }
  render() {
    return (
      <div>
        hello {this.state.key}
      </div>
    );
  }
}

export default AppChild;

要注意一下,子组件的构造方法一定要调用一下 super(props),否则程序会报错

事件

react里事件跟html里标签的事件方法名差不多,只不过react里有大小写区分,看一下下面这个例子

App.js

import React, { Component } from 'react';
import AppChild from './AppChild';

class App extends Component {

  render() {
    return (
      <div className="App">
        <p>App</p>
        <AppChild name="world" />
        <button onClick={this.click.bind(this)}>click me</button>
        // <button onClick={()=>this.click())}>click me</button>
      </div>
    );
  }

  click() {
    this.refs.child.changeValue('react');
  }
}

export default App;
  • 在App.js里加入一个 button 然后加上点击事件 onClick html标签里事件名是 onclick 很好记吧
  • 然后创建一个方法 click()
  • 调用方法,这个写法有点讲究,有两种调用方法 bind方式 箭头函数方式 这两种写法会保留组件的this还是指向组件的

父组件调用子组件方法

先看例子

父组件 App.js

import React, { Component } from 'react';
import AppChild from './AppChild';

class App extends Component {

  render() {
    return (
      <div className="App">
        <p>App</p>
        <AppChild name="world" ref="child" />
        <button onClick={this.click.bind(this)}>click me</button>
      </div>
    );
  }

  click() {
    this.refs.child.changeValue('react');
  }
}

export default App;

子组件

import React, { Component } from 'react';

class AppChild extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: this.props.name
    }
  }
  render() {
    return (
      <div>
        hello {this.state.key}
      </div>
    );
  }
  changeValue(value) {
    this.setState({
      key: value
    })
  }
}

export default AppChild;

当点击页面上的按钮后,会自动传一个 react 的字符串到子组件里去,然后在子组件里通过更新 state 来更新页面上展示的数据

实现步骤

  • 在子组件里创建一个方法 changeValue(value){}
  • 在父组件里用到子组件的地方加一个引用ref='child'
  • 在父组件里通过引用调用子组件里的方法

子组件调父组件方法

总结一下就是在父组件里调用子组件的时候顺便把父组件里的方法通过props传给子组件,下面看个例子就明白了

场景:在详情页里引入Header组件,当点击Header里的返回按钮时,会回到上一页

Header.js

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      back: this.props.back || false,
      title: this.props.title,
    }
  }
  back() {
    this.props.goBack()
  }
  render() {
    return (
      <div className="header">
        <div className="back" onClick={() => this.back()}>返回</div>
        <div>{this.state.title}</div>
        <div className="after">&nbsp;</div>
      </div>
    );
  }
}

export default Header;

Detail.js

import React, { Component } from 'react';
import Header from './Header';
import axios from 'axios';
import './css/Detail.css';

class Detail extends Component {
  goBack() {
    this.props.history.goBack();
  }
  render() {
    return (
      <div>
        <Header back={true} title="详情" goBack={() => this.goBack()} />
        <div className="detail">
          content
        </div>
      </div>
    );
  }
}

export default Detail;

可以看到在Detail.js里引入Header.js的时候,除了传的 back title 两个参数外,还有一个goBack,这个参数就是把Detail.js里的goBack()方法传给 Header.js 组件,然后在Header.js里就可以通过 this.props.goBack 来调用到Detail.js里的这个方法了

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录