前端入门之React入门指南

初识React

React是什么

react、vue、angular俗称前端框架三驾马车
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

React的特点

脚手架 - 我的第一个react项目

什么是脚手架？

“脚手架”是一种元编程的方法，输入一行命令就可以帮助我们快速构建代码模版。

image

全局安装脚手架

npm install -g create-react-app // window 平台
sudo npm install -g create-react-app // mac/linux 平台

使用脚手架新建项目

create-react-app react-demo // react-demo 是你的项目名称

启动项目

cd react-demo
npm run start

启动成功

image

React必备基础知识

JSX

我们来看一下如下代码：

const element =

Hello, world!

;

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，事实上它具有 JavaScript 的全部功能。

JSX表达式怎么写？

普通渲染

    <h1>我就是jsx</h1>

数学表达式

    <h1>{1 + 1}</h1>

字符串

    <h1>{'hello world'}</h1>

bool类型-无法渲染

    <h1>{isBoy}</h1>

使用变量

    <h1>{msg}</h1>

三目运算符

    <h1>{isBoy ? "男生" : "女生"}</h1>

调用方法

  const format = (msg) => {
     return '---' + msg + '---';
   }    

  <h1>{format(msg)}</h1>

使用对象

   const lamian = {
     name: "拉面"
   };

  <h1>{lamian.name}</h1>

JSX嵌套语法与循环

import React from 'react';
import ReactDOM from 'react-dom';

const list = ['苹果', '香蕉', '雪梨', '西瓜'];

const App = () => {
  return (
    <div >
      {
        <div>
          {
            list.map(v => <h1 key={v}>{v}</h1>) // 遍历数组
          }
        </div>
      }
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

JSX标签属性

jsx标签上可以设置绝大部分html标签的属性，如 checked、图片的src等，但需要注意几个点：

html的class属性改为className

     <div className="redCls">👍💯☁️</div>

html中label标签的for属性改为htmlFor

  <label htmlFor="inp">
          点我点我
            <input id="inp" type="text" />
  </label>

标签中的自定义属性使用data

  <div data-index={'hello'} >自定义属性</div>

渲染 html字符串使用 dangerouslySetInnerHTML 属性

  <li dangerouslySetInnerHTML={{__html:"<i>来啊呀</i>"}}></li>

bool类型的值可以这样用

  <input type="checkbox" checked={true} />

当属性太多了，可以使用 ... 扩展运算符

  const props={
   className:"redCls",
   "data-index":5
  }

 <div {...props}>展开属性</div>

行内样式的写法

  <div style={{ color: 'yellow', fontSize: "150px", "backgroundColor": 'red' }} > 颜色真不错</div>

tips: 在vscode上安装插件：vscode-styled-jsx，高亮jsx代码，提高编程体验。

组件的创建

在react中，组件分为两种，类组件和函数式组件

简单功能使用函数式组件
复杂功能使用类组件
组件名都必须大写

类组件

使用ES6创建Class的方式来实现一个组件类

首字母要大写
要继承 React中的Component类
必须实现render函数，函数内返回标签
组件有自己的state和生命周期

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import "./index.css";

 class App extends Component {
  render() {
    return (
      <div>
        嘿嘿嘿
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

函数式组件

也叫做无状态组件，简单功能的组件可以使用函数式组件，性能更高。

函数式组件其实就是一个函数，只不过函数内部需要返回对应的标签

首字母要大写
函数内要返回标签

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";

const App = () => {
  return (
    <div>简单的函数式组件</div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

小结

函数式组件性能更高，因为没有生命周期
函数式组件更方便进行测试
能不用类组件就不用类组件
当要使用 state 时，就要使用类组件

状态和属性

在React中，用状态(state)和属性(props)来实现数据动态化。下面分别来讲讲这两个概念。

状态：state

怎么理解state？

在react中，组件内部的数据是通过state来实现和管理
可以理解为state就是Vue中的data

为什么需要state？

我们之前使用变量，都是脱离了组件本身。而组件自身是应该具有私有和独立的数据（状态）的，这个私有的数据和状态就叫做 state，以后，只要说到数据的状态那么就是指类组件中的state

⚠️：函数式组件没有自己的state

state的声明和使用（两种方式）

类属性的方式声明

 class Person extends Component {
  // 1 声明 state
  state = {
    date: "2021",
    msg: "你好"
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

构造函数中声明

 class Person extends Component {
  // 1 构造函数中 声明 state
  constructor() {
    // 1.1 必须在this之前调用super()方法
    super();
    this.state = {
      date: "2009",
      msg: "天啊天啊"
    }
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

state的赋值（注意区别赋值和声明）

state的赋值方式只能通过 this.setState方法来实现。

需要注意的是，不能使用 this.state.date= 200 直接修改，否则会报错。

state的赋值是异步的。

react为了优化性能，将state的赋值代码改成异步的方式，可以避免反复的设置state而引发的性能损耗问题。

怎么体现？看看下面打印的值

 class Person extends Component {
  state = {
    date: 2010
  }
  handleClick = () => {
    let { date } = this.state;

    // 1 修改state中的日期 增加 2000
    this.setState({
      date: date + 2000
    });

    // 2 看看这个date是多少
    console.log(this.state.date);
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，我们希望在一设置值的时候，就希望马上得到最新的state的值，那么可以将代码改为下列的写法

给setState添加一个回调函数，回调中可以获取到修改后最新的state的值

 class Person extends Component {
  state = {
    date: 2008
  }

  handleClick = () => {
    let { date } = this.state;

    // 添加一个回调函数
    this.setState({
      date: date + 3000
    }, () => {
      // date的值为 3008
      console.log(this.state.date);
    });
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，setState还可以接收一个函数，函数内可以实时获取state中的值，不存在延迟

    this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1000
      }
    })

    this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1
      }
    })

属性 props

props意思是属性，一般存在父子组件中。主要用于父向子传递数据。

下面我们通过代码来演示一下

声明父组件，并在标签上通过属性的方式进行数据传递

   import HomeTop from '相对路径'       // 引入子组件
   import HomeFooter from '相对路径'

   class Home extends Component {
     state = {
       color: "blue",
       size: 100
     }
     render() {
       return (
         <div>
           <HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>
           <HomeFooter bcolor={this.state.color} bsize={this.state.size}  ></HomeFooter>
         </div>
       )
     }
   }

需要注意的是父组件中的变量名是 color,size 而 HomeTop 和 HomeFooter 中修改了一下变量名，分别是acolor asize 和 bcolor bsize，请注意联系。

声明一个类组件 HomeTop，通过 this.props 来获取父组件的数据

   class HomeTop extends Component {
     render() {
       return (
         <h1>屋顶的颜色是 {this.props.acolor} 尺寸 {this.props.asize}</h1>
       )
     }
   }

声明一个函数式组件HomeFooter，父组件传递的数据需要在函数的形参props上接收

   const HomeFooter = (props) => {
     return <h1>屋底的颜色是 {props.bcolor}  尺寸 {props.bsize}</h1>
   }

写在最后

对于想要熟练react开发的同学而言，要学习的内容还有不少，包括但不限于react的生命周期、hooks、以及redux等，由于篇幅限制就先和大家分享到这里。我在空闲时间整理了一份前端面试题，其中包含react、HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等，免费分享给大家，还在持续整理收集整理中，有需要的朋友直接点击此处的蓝色字体获取完整文档。

React

REACT 全家桶
介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
React-Redux到react组件的连接过
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发
Redux中异步的请求怎么处理
如何配置React-Router
react-router怎么实现路由切换？BrowserRouter as Router
......

HTML和CSS

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
Quirks 模式是什么？它和 Standards 模式有什么区别
div+css 的布局较 table 布局有什么优点？
img 的 alt 与 title 有何异同？ strong 与 em 的异同？
你能描述一下渐进增强和优雅降级之间的不同吗?
为什么利用多个域名来存储网站资源会更有效？
请谈一下你对网页标准和标准制定机构重要性的理解。
请描述一下 cookies，sessionStorage 和 localStorage 的区别？

JavaScript

JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
知道什么是 webkit 么? 知道怎么用浏览器的各种工具来调试和 debug 代码么?
如何测试前端代码么? 知道 BDD, TDD, Unit Test 么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
简述一下 Handlebars 的基本用法？
简述一下 Handlerbars 的对模板的基本处理流程，如何编译的？如何缓存的？
用 js 实现千位分隔符?
检测浏览器版本版本有哪些方式？
我们给一个 dom 同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
实现一个函数 clone，可以对 JavaScript 中的 5 种主要的数据类型（包括 Number、String、Object、Array、Boolean）进行值复制
如何消除一个数组里面重复的元素？

HTML5和CSS3

CSS3 有哪些新特性？
html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？
如何区分 HTML 和 HTML5？
本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么？
如何实现浏览器内多个标签页之间的通信?
你如何对网站的文件和资源进行优化？
什么是响应式设计？
新的 HTML5 文档类型和字符集是？
HTML5 Canvas 元素有什么用？
HTML5 存储类型有什么区别？

有需要的朋友直接点击此处的蓝色字体获取完整文档。

posted @ 2021-01-05 17:53 Android程序员吴彦祖阅读(643) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

飘哥233