カスタム関数、ライフサイクルフック関数、変更状態、成分を反応させ、成分値が合格します

1レビュー

2、カスタム機能

イベントのonclick ==>のonClickのonchange ==>のonChangeの大きさの最初の文字

• ----普通のクリックイベントは）（なしイベント、プラス即時実施を呼び出します

import React, { Component } from 'react';

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

  test () {
    console.log('按钮被点击了')
  }

  render () {
    return (
      <div>
        <button onClick={ this.test }>按钮点击事件</button>
      </div>
    )
  }
}

• イベントオブジェクト---デフォルトパラメータイベントのイベントでカスタム

import React, { Component } from 'react';

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

  test (event) { // ++++++++++++++++++++++++
    console.log('按钮被点击了', event)
  }

  render () {
    return (
      <div>
        <button onClick={ this.test }>按钮点击事件</button>
      </div>
    )
  }
}

• あなたは、新しいメソッドを追加する機能の内部構造内に---このイベントを使用する場合

import React, { Component } from 'react';

export default class extends Component {
  constructor (props) {
    super(props);
    // 2.给当前的实例添加一个方法，这个方法其实就是自定义的函数，给自定义的函数绑定this，就可以在自定义的函数内部访问this
    this.testfn = this.test.bind(this); 
    this.state = {
    }
  }

  test () {
    console.log('按钮被点击了', this) // 1.默认this为未定义，需要改变this指向
  }

  render () {
    return (
      <div>
        <button onClick={ this.testfn }>按钮点击事件</button>
      </div>
    )
  }
}

• あなたはこの時点以内にこのイベントを使用する場合--- ---単に勧告を変更

import React, { Component } from 'react';

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

  test () {
    console.log('按钮被点击了', this) // 1.默认this为未定义，需要改变this指向
  }

  render () {
    return (
      <div>
      {
        // 2、onClick={ this.test.bind(this) } --- 只是改变this指向
      }
        <button onClick={ this.test.bind(this) }>按钮点击事件</button>
      </div>
    )
  }
}

• ミサの参加イベント

import React, { Component } from 'react';

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

  test (str) {
    console.log('按钮被点击了', this) // 1.默认this为未定义，需要改变this指向
    console.log(str)
  }

  render () {
    return (
      <div>
      {
        // 2、this.test.bind(this, '111111')
      }
        <button onClick={ this.test.bind(this, '111111') }>按钮点击事件</button>
      </div>
    )
  }
}

3ライフサイクルフック関数

• VUE：/マウント/更新を作成/破棄

安定版、フック関数のライフサイクルを廃止する必要性の一部

• 初期化フェーズ

  コンストラクタ（）//初期化データ

  componentWillMount（）//古い元（15版）のデータを要求したが、今基本的に、17バージョン無用を廃止しました

  レンダリング（）// ----不可欠な初期データロード

  componentDidMount（）//リクエストデータ、DOMは---搭載VUEの動作と同等です

• ランタイムフェーズ

  モニタデータは、今基本的には、17バージョン無用廃止// componentWillReceiveProps（）

  shouldComponentUpdate（）// trueを返します---デフォルトでは、重要なのパフォーマンスを向上させる反応

  componentWillUpdate（）//ここで基本的に廃止17バージョン無用

  レンダリング（）//欠かを再現するためのビューをレンダリング----

  componentDidUpdate（）// DOM操作----- VUEは、要求されたデータに相当する---更新推奨されていません

• 破壊段階

  componentWillUnmount（）//コンポーネントは--- beforeDestroyのVUE破壊に類似しています

ライフサイクルの新バージョン

• 初期化フェーズ

  コンストラクタ（）

  静的のgetDerivedStateFromPropsはrenderメソッドを呼び出している最初のインストールおよびその後の更新で//）（直前に呼び出します。これは、オブジェクトの状態を更新するために戻る、または任意のコンテンツが更新されないヌル必要があります。https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

  レンダリング（）

  componentDidMount（）

• ランタイムフェーズ

  静的getDerivedStateFromProps（）

  shouldComponentUpdate（）

  レンダリング（）

  getSnapshotBeforeUpdate（）最近のレンダリング出力の直前のDOMへの提出に//コール

  componentDidUpdate（）

• 破壊段階

  componentWillUnmount（）

• エラー処理

  静的getDerivedStateFromError（）

  componentDidCatch（）

4 +ライフサイクルの変更状態

this.setState（）

import React, { Component } from 'react';
import axios from 'axios';
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      prolist: []
    }
  }
  // +++++++++++++++++++++++++++++
  componentDidMount () {
    // 请求数据
    axios.get('/api/pro').then(res => {
      // 修改状态
      this.setState({
        prolist: res.data.data
      })
    })
  }

  render () {
    let { prolist } = this.state
    return (
      <div>
        {
          prolist.map(item => (
            <p key = { item.proid }> { item.proname } - { item.price } </p>
          ))
        }
      </div>
    )
  }
}

5、コマンド分化のWebPACKの環境を実行

cnpm私が交差-ENV -D

• スクリプトの設定オプションのpackage.json

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
  },

• 設定WebPACKのプラグインプラグイン

const isDev = process.env.NODE_ENV =='development'

plugins: [ // 添加插件 ---- 数组
  new webpack.optimize.UglifyJsPlugin(), // 压缩js文件
  new webpack.DefinePlugin({ // ++++++++++++++++++
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  }),
  new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件
    template: 'index.html' // 找的就是当前文件夹下的index.html文件
  })
],

6、パッケージデータ要求

• utilsの/ request.jsカスタムaxios

// 1、引入axios模块
import axios from 'axios';

// 2、判断是什么环境 -- 开发环境 -- 生产环境
// 真  ----   开发环境 ---- 反向代理
// 假  ----   生产环境
const isDev = process.env.NODE_ENV === 'development'

// 3、自定义axios
let request = axios.create({
  // 基础的请求地址
  baseURL: isDev ? '/api' : 'http://47.92.152.70'
})

// 4、给所有的请求添加头信息
// request.defaults.headers['token'] = localStorage.getItem('token')

// 4、使用axios的拦截器  ----  请求的拦截器  +  响应的拦截器
// http://www.axios-js.com/zh-cn/docs/#%E6%8B%A6%E6%88%AA%E5%99%A8

// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 所有的请求都需要的字段，所有的请求添加loading效果
  // token
  config.headers['token'] = localStorage.getItem('token')
  return config;
});

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 消除请求的loading效果
  return response;
});

// 5、暴露axios模块
export default request;

• utilsの/ api.jsは、インタフェースパッケージへの要求します

// 1、引入自定义的axios
import request from './request';

// 2、封装接口

/**
 * 封装 数据列表的接口
 * pageCode 页面
 * limitNum 每页显示个数
 */
const getProlist = (pageCode, limitNum) => {
  pageCode = pageCode * 1 || 0;
  limitNum = limitNum * 1 || 10;
  // 使用promise解决异步问题
  return new Promise((resolve) => {
    // 因为自定义的axios包含baseUrl,此处只需要写后面的接口即可
    request.get('/pro', { params: { pageCode, limitNum} }).then(res => {
      resolve(res.data)
    })
  })
}

/**
 * 请求轮播图接口
 * type 哪一个类型的轮播图 home / kind / activity 
 */

const getBannerlist = (type) => {
  type = type || 'home';
  return new Promise((resolve) => {
    request.get('/banner', { params: { type }}).then(res => {
      resolve(res.data)
    })
  })
}

// 3、暴露接口
export {
  getProlist,
  getBannerlist
}

7つのコンポーネント

• App.js親コンポーネント

import React, { Component } from 'react'
import { getBannerlist, getProlist } from '@/utils/api';
import Prolist from './Prolist'; // +++++++++++++++++++++++++++++
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      bannerlist: [],
      prolist: []
    }
  }

  componentDidMount () {
    getBannerlist().then(data => {
      this.setState({
        bannerlist: data.data
      })
    })
    getProlist().then(data => {
      this.setState({
        prolist: data.data
      })
    })
  }

  render () {
    return (
      <div>
        <ul>
          { this.state.bannerlist.map(item => (
            <li key={item.bannerid }>{ item.img }</li>
          ))}
        </ul>
        { 
          // +++++++++++++++++++++++++++++++++++
        }
        <Prolist />
      </div>
    )
  }
}

• ------ Prolist.jsサブアセンブリ内行JSXフォローJSスタイル文体であり、プラス{}を反応させます

import React, { Component } from 'react';

export default class extends Component {
  render () {
    return (
      <ul>
        <li>
          {
            // <img src="" alt="" style="width: 60px;"/>
          }
          <img src="" alt="" style={ { width: '60px'} }/>
          <p>华为meta 30</p>
          <p>5999</p>
        </li>
      </ul>
    )
  }
}

8親コンポーネントサブアセンブリ値を渡します

App.js親コンポーネントサブアセンブリのProlist.js

• 親コンポーネントは、サブアセンブリ値を渡します

ここで、親コンポーネントサブアセンブリコール、カスタム属性を追加し、属性値がサブアセンブリに渡すための値であり、変数の値が渡された場合、ブール値、数値型、} {反応する必要

<Prolist prolist={ this.state.prolist }/>

サブアセンブリでは、データのサブコンポーネントをレンダリング、データがデータを使用して、場所に依存し得る親コンポーネントサブアセンブリに渡されるデータにthis.propsによってアクセスすることができます

import React, { Component } from 'react';

export default class extends Component {
  render () {
    console.log(this.props)
    return (
      <ul>
        {
          this.props.prolist.map(item => (
            <li key={item.proid}>
              <img src={  item.proimg  } alt="" style={ { width: '60px'} }/>
              <p>{ item.proname }</p>
              <p>{ item.price }</p>
            </li>
          ))
        }
      </ul>
    )
  }
}

データのデータ型を検証する必要が親コンポーネントを送信した場合

プロパ型の第3のモジュールでreact15.5タイプを確認した後

cnpm Iプロップタイプ-S

サブアセンブリの構成要素のデータタイプを確認

BOOL、アレイ、FUNC、番号、オブジェクト、文字列シンボル、ノード、要素

import React, { Component } from 'react';
import PropTypes from 'prop-types'; // ++++++++++++++++++++++
class Com extends Component {
  render () {
    console.log(this.props)
    return (
      <ul>
        {
          /*
          <li>
          {
            // <img src="" alt="" style="width: 60px;"/>
          }
          <img src="" alt="" style={ { width: '60px'} }/>
          <p>华为meta 30</p>
          <p>5999</p>
        </li>
        */
        }
        {
          this.props.prolist.map(item => (
            <li key={item.proid}>
              <img src={  item.proimg  } alt="" style={ { width: '60px'} }/>
              <p>{ item.proname }</p>
              <p>{ item.price }</p>
            </li>
          ))
        }
      </ul>
    )
  }
}
// +++++++++++++++++++
Com.propTypes = {
  prolist: PropTypes.array
}

export default Com

図9に示すように、親コンポーネントサブアセンブリパス値

伝統的な価値観に親コンポーネントサブアセンブリを、カスタムプロパティを渡すために、実際に親コンポーネントサブアセンブリでは、このプロパティの値は、親コンポーネントの関数定義関数である、サブアセンブリこの関数を呼び出し、我々は問題にこれがポイントということを覚えておく必要があります

サブコンポーネント

import React, { Component } from 'react';

// class Com extends Component {
//   sendData () { // ++++++++++++++
//     console.log(this.props) // 记得改变this指向，{fn: function()}
//     this.props.fn('我是子组件')
//   }

//   render () {
//     return (
//       <div>
//         <button onClick={ this.sendData.bind(this) }>给父组件传值</button>
//       </div>
//     )
//   }
// }

class Com extends Component {
  render () {
    return (
      <div>
        <button onClick={ () => {
          // +++++++++++++++++++++++
          this.props.fn('222222222222')
        } }>给父组件传值</button>
      </div>
    )
  }
}

export default Com;

親コンポーネント

import React, { Component } from 'react'
import Child from './Child';
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
    }
  }

  getData (str) { // +++++++++++++++++++++++++++
    console.log(str)
  }

  render () {
    return (
      <div>
        {
          // ++++++++++++++++++++++ fn 
        }
        <Child fn={ this.getData.bind(this) }/>
      </div>
    )
  }
}

10、足場と反応

作成反応するアプリ

• 1、足場をインストール

  cnpm iが作成反応するアプリ-g

  作成反応するアプリのmyappに

• 2、インストールしていない足場NPX ----ノード8.9自動的に持っているより上

  NPX myappの作成・アプリの反応

• 3、使用してDVAが作成反応するプロジェクト--- DVA / CLI

  DVA-CLIをインストールcnpm -g

  新しいmyappのDVA