10分钟快速了解 React 基础入门指南_react基础指南

如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。创建项目使用 create-react-app 工具快速创建 React SPA。# 创建项目
yarn create react-app my-appcd my-app# 开发模式下运行程序
yarn start项目初始结构:my-app/README.mdnode_modu

10分钟快速了解 React 基础入门指南

如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。

10分钟快速了解 React 基础入门指南_react基础指南

创建项目

使用 create-react-app 工具快速创建 React SPA。

# 创建项目
yarn create react-app my-app

cd my-app

# 开发模式下运行程序
yarn start

项目初始结构:

my-app/
  README.md
  node_modules/
  package.json
  public/  # 项目使用的公共文件
    index.html # 首页的模板文件
    favicon.ico # 项目的图标
    mainifest.json # 移动端配置文件
  src/ # 源代码
    App.css
    App.js
    App.test.js
    index.css
    index.js # 入口文件
    logo.svg

Hello React

// src/index.js 入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 将根组件渲染到 id 为 root 的 dom 上
ReactDOM.render(<App />, document.getElementById('root'));
// src/app.js 根组件
import React, { Component } from 'react';
// 创建根组件
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'Hello React'
    }
  }
  render() {
    // JSX 语法
    return (
      <div className="App">
        <h1>{ this.state.msg }</h1>
      </div>
    );
  }
}
export default App;

最终这个根组件会在页面上显示出内容为 Hello React 的 h1 标题。

JSX

上例中在写根组件时,render 函数中提到了 JSX,简单的看,就是一个可以在 js 中写 html,简化了通过 React.createElement 创建 Dom,Babel 会将 JSX 转译。

JSX 中有以下几点需要注意:

  1. <> 会当做 html 解析 {} 会当做 js 解析;
  2. class 替换为 className,for 替换为 htmlFor;
  3. 组件必须有一个最外层根元素包裹,若不想要根元素则可以使用 <Fragment>,需要引入 import { Fragment } from ‘react’;

写一个 ToDoList 应用

开始写之前先明确一下一个 ToDoList 的需求:

  • 一个输入框输入要做的事;
  • 一个添加按钮添加输入框中的事件到列表中;
  • 一个展示当前已添加事件的列表;
  • 点击列表中的事件表示已完成,则删除对应事件;

Todo 组件

先写一个名为 Todo 的组件,然后在 App 根组件中调用即可。

App.js 中调用 Todo 组件。

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

class App extends Component {
  render() { 
    return ( 
      <Todo></Todo>
    );
  }
}
 
export default App;

调用自定义的组件时直接像原生 html 组件一样使用 <> ,区别是自定义组件需要以大写字母开头。

// Todo.js
import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      inputVal: '早起',
      list: ['吃早饭', '洗脸刷牙']
    };
    this.inputChange = this.inputChange.bind(this);
    this.addItem = this.addItem.bind(this);
    this.delItem = this.delItem.bind(this);
  }
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="todoIpt">todo: </label>
          <input
            id="todoIpt"
            ref={iptRef => this.iptRef = iptRef}
            value={this.state.inputVal}
            onChange={this.inputChange}
          />
          <button onClick={this.addItem}>+</button>
        </div>
        <ul>
          {
            this.state.list.map((item, idx) => {
              return (
                <TodoItem
                  key={idx+item}
                  idx={idx}
                  content={item}
                  delItem={this.delItem}
                />
              )
            })
          }
        </ul>
      </Fragment>
     );
  }
  inputChange() {
    this.setState({
      inputVal: this.iptRef.value
    })
  }
  addItem() {
    this.setState({
      list: [...this.state.list, this.state.inputVal]
    })
  }
  delItem(idx) {
    const list = this.state.list;
    list.splice(idx, 1);
    this.setState({
      list
    })
  }
}
 
export default Todo;

仍然引入 react 及 react.component 并使用 class 创建组件。
constructor 中通过 super 继承父组件传入的数据,通过 state 定义组件内部的数据。
render 函数中在 {} 中使用 js 给 html 动态绑定数据及事件,绑定的事件也定义在 class 中,需要通过 bind 修改 this 指向。

这里使用 ref 将输入框节点获取并保存在 this.iptRef 上,在 onchange 事件中修改其绑定的数据 inputVal。
修改数据时需要调用 setState 方法才能出发视图的更新。

ul 中直接使用 js 的 map 方法遍历 state.list 生成展示列表,列表中的每一项又单独抽出来作为一个新的子组件 TodoItem,并将子组件需要的数据 idx、content 及方法 delItem 传给他。
需要注意的时遍历生成的组件如果没有添加 key 属性则会报警告。

TodoItem 组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleItemClick = this.handleItemClick.bind(this);
  }
  render() {
    return (
      <li onClick={this.handleItemClick}>
        {`${this.props.idx + 1}. ${this.props.content}`}
      </li>
     );
  }
  handleItemClick() {
    this.props.delItem && this.props.delItem(this.props.idx);
  }
}

TodoItem.propTypes = {
  idx: PropTypes.number.isRequired,
  content: PropTypes.string.isRequired,
  delItem: PropTypes.func
}
 
export default TodoItem;

子组件直接通过 props 拿到父组件传递的数据包括方法。
子组件没法直接修改父组件传来的数据,因此需要调用父组件的方法来修改,比如这里的点击删除该项就是调用了父组件的 delItem 方法。

这里还引入了 prop-types 来帮助子组件进行传入数据的类型检查,还可以添加 isRequired 表明该数据是必须要传的,如果没有按照这个限制传给子组件数据则会有报错提示。

现在这个需求基本已经完成了。

生命周期

react 的每个组件都有一套生命周期函数,在组件开始渲染、更新到销毁的每个时间点都会执行对应的生命周期函数。

生命周期函数图谱

上面这个链接可以看到各种函数的执行顺序,最常用的 componentDidMount 就类似于 vue 的 mounted。
其中比较特殊的是 shouldComponentUpdate,它可以在组件更新之前进行拦截,return true 时才会执行 render 函数。

前面的 ToDoList 程序中,如果在子组件的 render 函数中增加一条 console.log 就会发现输入框的值每次变化都会触发所有组件的渲染,因此这里可以使用 shouldComponentUpdate 进行拦截。

TodoItem 组件中添加:

shouldComponentUpdate(nextProps, nextState) {nextProps, nextState);
  return nextProps.content !== this.props.content;
}

表明只有当 content 更新时才执行下一步 render 函数。

总结

到这基本上对 react 有了一个基本的了解了。

海计划公众号
(0)
上一篇 2020/03/24 05:44
下一篇 2020/03/24 05:44

您可能感兴趣的内容

  • Vue源码之实例方法使用帮助_源码小白入门

    在 Vue 内部,有一段这样的代码:import { initMixin } from ‘./init’
    import { stateMixin } from ‘./state’
    import { renderMixin } from ‘./render’
    import { eventsMixin } from ‘./events’
    import { lif

    2020/03/29
  • 用CodePush在React Native App中做热更新基础知识教程_热更新使用教程

    最近在学React Native,学到了CodePush热更新。两种实现的方法,现将其记录一下。相比较原生开发,使用React Native开发App不仅能节约开发成本,还能做原生开发不能实现的热更新功能。使用原生技术开发App时,每次代码做了改动后,都需要提交到应用商店进行审核,审核通过后,需要等用户重新下载安装后才会生效。而如果使用React Nativ

    2020/03/24
  • rem布局和vw布局的理解小白攻略_布局攻略教程

    什么是rem单位?rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。默认情况下,html元素的font-size为16px,rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面

    2020/04/03
  • 信息泄漏时代,如何让自己的密码更安全?入门教程_安全基础知识教程

    密码的重要性,相信大家都不言而喻。而密码泄漏或信息泄漏,经常是层出不穷地出现,令人防不胜防。所以,一个强大而复杂的密码是保证自己账户安全的第一步。为了防止信息泄漏,我们可以做些什么呢?密码足够复杂;每个平台密码都不一样,比如QQ,微信,邮箱等;定期更换密码。那怎样的密码才算是比较可靠的密码?一般而言,一个密码至少12位字符,包含数字,包含大小写,包含特殊符号

    2020/03/30
  • EasyMock小白帮助_一个可视化,并且能快速生成模拟数据的服务。

    EasyMock小白帮助 官方网址:https://www.easy-mock.com 简介描述:一个可视化,并且能快速生成模拟数据的服务。 Easy Mock 是一个可视化, 并…

    2020/03/06
  • MUI基础入门教程_最接近原生APP体验的高性能前端框架

    MUI基础入门 官方网址:http://dev.dcloud.net.cn/mui/ GitHub:https://github.com/dcloudio/mui 简介描述:最接近…

    2020/03/05
  • 帝国CMS小白常识超高安全、超高稳定的开源CMS系统

    帝国CMS小白常识 官方网址:http://www.phome.net/ 简介描述:超高安全、超高稳定的开源CMS系统 帝国网站管理系统(EmpireCMS) - 超高安全、超高稳…

    2020/03/06
  • Karma使用帮助一款由Google团队开发的一套前端测试运行框架

    Karma基础入门 官方网址:http://karma-runner.github.io/2.0/index.html GitHub:https://github.com/karm…

    2020/03/05
  • ReplaceGoogleCDN小白攻略_一个 Chrome 插件:将 Google CDN 替换为国内的

    ReplaceGoogleCDN小白攻略 GitHub:https://github.com/justjavac/ReplaceGoogleCDN 简介描述:一个 Chrome 插…

    2020/03/11
  • 只会前端如何搭建动态网站新手入门_cms基础指南

    如果你只有前端的经验,做好了静态网页,对php,java,net等语言一点都不理解,怎么建个后台呢?想给网页加个后台,我可以直接下个网站后台加上吗?有很多前端同学有这样的问题了……这里讲解一下如何快速的上手搭建动态网站,这里推荐使用php后端的cms框架来搭建,让前端直接傻瓜式的放进去就可以成为动态网站了。内容展示类dede织梦集简单、健壮、灵活、开

    2020/04/06
  • 对于前端开发,整理推荐好用的chrome插件或应用入门教程_插件基础入门

    1、PostmanPostman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。 它不仅可以调试简单的css、html、脚本等简单的网页基本信息,它还可以发送几乎所有类型的HTTP请求!可以将它发送到桌面为快捷方式,方面快速启动 。Postman使用简单,功能强大,启动之后的界面如下:JSON ViewerJSON格式太乱怎么办?这个插件

    2020/04/05
  • 从 callback 到 promise基础知识_promise基础知识

    Javascript 异步演化史前几天看了一个Javascript 异步演化史,谈到从 callback 到 Promise 再到 Async/Await 的历程,很有趣。大家有兴趣的话可以去看一下原文,或是直接百度搜翻译。我这里默认大家都了解了这段历史,只简单介绍一下 javascript 异步操作里的一个小知识点–promisify。从 callbac

    2020/03/20
  • 微服务架构之「 容器技术 」入门教程_Docker菜鸟指南

    现在一聊到容器技术,大家就默认是指 Docker 了。但事实上,在 Docker 出现之前,PaaS社区早就有容器技术了,以 Cloud Foundry、OpenShift 为代表的就是当时的主流。那为啥最终还是 Docker 火起来了呢?因为传统的PaaS技术虽然也可以一键将本地应用部署到云上,并且也是采用隔离环境(容器)的形式去部署,但是其兼容性非常的

    2020/03/24
  • css中calc()函数小白常识_函数入门百科

    calc()函数css3中函数:用于动态计算长度值。(注意事项:运算符前后都需要保留一个空格,例如:width: calc(100% – 10px))任何长度值都可以使用calc()函数进行计算;calc()函数支持 “+”, “-“, “*”, “/” 运算;calc()函数使用标准的数学运算优先级规则案例:
    <h

    2020/03/30
  • Gitment – 一款基于Github的Issues实现的评论插件小白攻略_github基础指南

    最近发现了一个有意思的评论插件Gitment, 从实现和效果上都不错,给大家介绍一下。如果你有个人博客,可以考虑使用;如果你没有个人博客,也可以了解下实现的思路,开开脑洞。之前普遍使用的多说评论关闭了,相信很多人的博客都受到了影响。我个人的博客评论也因此换过Discuz, 网易评论插件,畅言评论插件,都不甚理想。这次看到Gitment还是有些惊喜。实现的最终

    2020/04/05
  • js中实现函数重载小白知识_重载菜鸟指南

    引言最近在js的学习中,看到了函数重载的问题,一开始,只看到了实现代码,看着代码冥思苦想了半个小时,总算是理清了其实现的原理,也为其实现的巧妙感到赞叹,也是在自己搞懂原理之后,去网络上搜索了下,才知道,这个实现方法是jQuery作者John Resig在《JavaScript忍者秘籍》中对函数重载的实现,设计十分的巧妙,写下此文,给大家做一个分享什么是函数的

    2020/03/24