🎈 现在订阅送半年,再次订阅 / 续订送一年。(活动即将结束) 🎉

博客

Bootstrap 4 来了!

Bootstrap 4 是地球上最受欢迎的 CSS 界面框架。最新版的 Bootstrap 4 已经发布测试版,现在我们的网站应用的界面已经可以基于 Bootstrap 4 去开发了。宁皓网录制了一批新鲜的 Bootstrap 课程,刚刚发布了 《Bootstrap 4:网页布局》,其它组件的使用方法本月会陆续发布完。

学习 Bootstrap

Bootstrap 的基本使用是非常简单的,仔细地看看官方文档就能直接用了,不过即使是老手,也经常在文档中迷失。正确的方法是先看宁皓网的视频:) 然后再去看文档。

用 Vue.js 与 React.js 创建前端应用

找份前端工作,或自己创业做个项目。应用的前端部分少不了用 Vue.js 与 React.js 这两个框架其中的一个。在国内腾讯,阿里这样的公司也都在使用它们。在 Github 托管的所有开源项目里面,当前 React 排第四,Vue 排第六。

用最简单的例子,演示最核心的东西。跟随最近发布的《Vue.js:应用案例》,《Vue.js:应用案例(Vuex)》,还有《React.js:应用案例》 这几个课程,您可以更好地理解这两个框架。配合宁皓网的其它相关课程,您应该可以开始使用它们去创建自己需要的应用了。

订阅宁皓网,在线学习所有 Vue.jsReact.js 相关课程。

React:在表单元素事件处理上应用 Throttle 或 Debounce

在介绍 React 表单使用的时候,我们创建一个 HelloForm 组件,组件里用了一个文本框,监听了文本框的 change 事件,用 handleChange 来处理这个事件。在这个事件处理里面,输出了文本框里面发生变化的值。有些动作我们不想执行的那么勤快,有一点点变化就去执行一些任务,这样太浪费。比如你想实时地把用户输入的内容保存在后端数据库里,后端可能受不大了,我们得去做点限制。可以用 Throttle 或 Debounce。

在 Lodash 这个库里有可以创建  Throttle 或 Debounce 函数的方法。先给项目安装一下 Lodash:

yarn add lodash

在项目文件里,可以直接导入 Lodash 的 ThrottleDebounce 。像这样:

用 Throttle 与 Debounce 限制调用函数

在应用里有些功能(函数)你希望限制它的执行。比如一个实时搜索功能,用户在搜索框里输入想要找的东西,可以实时地显示搜索结果。这个功能我们可能要去监听搜索框里的 change 或者 input 事件,发生变化以后就去请求搜索。但是我们不希望每次有一点点变化就去执行搜索,这就需要使用 Throttle 或 Debounce 去限制一下这个搜索功能的执行。

Throttle 与 Debounce 都可以限制函数的执行,但是有一点区别。

Throttle

Throttle:函数在每个等待间隔时间里最多只能执行一次。使用 Throttle 的时候,可以提供一个要执行的函数,还要一个等待时长。比如我们要执行的函数是 search,等待的时长是 1000ms ,这样 search 这个函数在 1000ms 以内,最多就只能被调用一次。

Debounce

Debounce:直到从上一次 Debounce 函数被执行以后再经过一个设置的等待的时间以后,才会执行 Debounce 函数。就是我们设置个等待时间,这个时间过了以后才能调用函数,接着想要再次调用这个函数必须还要经过从上一次调用函数以后,再经过设置的等待时间以后才行。

React:表单

HTML 的表单元素有自己的内部数据(State),用户在文本框里输入内容,勾选了复选框,这些行为会直接修改表单元素的内部数据。在 React 里,修改数据都要通过 setState 去做。下面这个练习可以帮你理解在 React 组件里的使用表单。

添加一个 HelloForm 组件:

class HelloForm extends Component {
  state = {
    text: ''
  }

  handleChange = (event) => {
    this.setState({
      text: event.target.value
    })
    console.log('输入:', event.target.value)
  }

  handleSubmit = (event) => {
    event.preventDefault()
    console.log('提交:', this.state.text)
  }

  render () {
    return (
      <form onSubmit={ this.handleSubmit }>
        <input type="text"
          value={ this.state.value }
          onChange={ this.handleChange } />
      </form>
    )
  }
}

React:显示列表

在 React 组件的显示里面,我们经常需要根据组件里的数据去显示一个组件的列表。可以使用数组的 map 方法得到一组列表,然后放在组件的显示里用一下。注意列表里的每个项目都应该有个 key 属性,并且每个项目的  key 属性的值都应该不一样。下面这个练习可以帮您理解在 React 组件里显示列表。

有个 Message 组件是这样的:

const Message = (props) => {
  return <div>{ props.message }</div>
}

再改造一下 App 组件,先在组件的 State 里添加一组要显示的数据:

  state = {
    header: 'ninghao.net',
    show: false,
    messages: [
      { id: 0, text: 'hello ~'},
      { id: 1, text: 'hola ~'},
      { id: 3, text: '您好 ~'}
    ]
  }

上面我们添加了一个 messages ,它里面有一个 id 属性,还有个 text 属性,这个 messages 里的数据我打算用 Message 这个组件来显示。先去生成一个组件列表,在 App 组件的 render 方法里,用一下 map 方法:

const { messages } = this.state
const messageItems = messages.map(message => {
  return <Message key={ message.id } message={ message.text } />
})

React:条件显示

有些东西在组件里你可能希望在特定条件下显示或者隐藏,或者要根据条件显示特定的内容。下面的练习可以帮你理解按条件显示。

src/components/App.js

先在 App.js 里添加一个新的组件,这个组件只负责显示,所以可以直接使用一个函数类型的组件。

const Message = (props) => {
  return <div>{ props.message }</div>
}

上面定义了一个叫 Message 的组件,函数类型的组件可以接受一个 props 参数,它就是从爸爸那里传递过来的属性。组件里面用了一组 <div> 标签,里面包装显示了属性里的 message 这个属性的值。

新课程:《React:应用案例》

项目预览

想学用 React 创建前端应用,可以直接从最新的 React 课程《React:应用案例》开始。课程里会从头开始创建一个 React 应用,里面演示了 React 大部分的关键概念。用一天时间去练习这个课程,保证您对 React 框架产生感觉 :)

订阅宁皓网,学习所有 React 与相关课程

React:组合组件与传递属性

组件可以组合到一块儿去用,之前在 App 组件的显示里用了 h2 元素,现在我们把它单独定义成一个叫 Header 的组件,然后在 App 里用一下 Header 这个组件,这样 App 就是 Header 组件的爸爸(Parent),Header 是 App 的儿子(Child)。爸爸给儿子可以传递数据,儿子在显示的时候可以使用这些数据,传递的数据叫属性(Props)。

React: Class 类型的组件

React 里的组件可能用函数来定义,也可以是个类(Class)。 使用类定义的组件有更多的功能,比如使用组件的生命周期函数,定义自己的方法,添加数据的数据(State) 等等。

下面用 Class 改造一下之前我们定义的 App 这个组件:

import React, { Component } from 'react'

class App extends Component {
  render () {
    return (
      <h2>ninghao.net</h2>
    )
  }
}

export default App

先要导入 React,再从 React 里面把 Component 拿出来用。React 组件的类可以继承这个 Component,定义的这个类的名字就是组件的名字。 组件里面要显示的东西用 render 方法返回。

State

组件内部使用的数据叫 State。 我们可以在组件里面自己定义需要的 State,数据有变化以后可以使用 setState 这个方法去设置组件的 State,这样组件会重新在界面上显示。



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

8328
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点