前端框架react
文章平均质量分 83
作为世界上目前使用最多的前端框架,React 是一个用于构建用户界面的 JavaScript 库,让你的编程更加快速轻松。
是小先生
从头开始,为时不晚。
展开
-
前端框架react----实战店铺评价界面
前言学习react已经有一段时间了,我们现在来用react官方的脚手架来实现一个店铺的评价界面,首先来看看我们的最终实现效果:界面功能:点击评价,打开评价框; 输入内容,打几颗星星; 可以提交与取消,提交完评价变成灰色已评价。技术工具: react的官方脚手架、vs-Code、浏览器。...原创 2021-09-02 17:46:28 · 719 阅读 · 1 评论 -
前端框架react----Context实例
目录前言一、复习Context二、深浅主题切换案例前言在之前的文章中也介绍过Context,本次文章简单复习一下,并且以实例来理解Context。一、复习Context我们知道,在JS中context指的是函数的执行上下文,函数被调用时,this指向谁,谁就是当前的执行上下文;react中的context是什么呢?官方文档给出:Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。文档也没具体给出context到底是什原创 2021-08-28 14:50:27 · 319 阅读 · 0 评论 -
前端框架react---评论栏实例
目录前言一、react准备1、配置开发环境,安装以及运行React项目2、脚手架主要目录介绍3、新建组建(使用es6的语法)二、JSX复习1、什么是JSX?2、基本语法1、简单的认识2、三元运算符3、属性4、HTML被编译成什么?三、react复习1、Props(属性)2、state(状态)3、生命周期4、Foems(表单)四、评论栏实例1、原型图:2、分析原型图3、开始编写前言 react 是一个UI库...原创 2021-08-27 17:48:11 · 578 阅读 · 1 评论 -
前端框架react----hook基础
前端框架react----hook基础目录前端框架react----hook基础前言一、基本1、Hook初识2、注意点二、基础Hook1、useState2、useEffect3、useContext三、其他Hook1、useReducer2、useRef3、useCallback4、useMemo四、自定义Hook前言经过前面的学习,本文将讲解一下Hook的比较重要的知识点。Hook 是 React 16.8 的新增特性。它可以让原创 2021-08-26 09:35:35 · 416 阅读 · 0 评论 -
前端框架react----Context
前端框架react----Context前言Context提供了一个不需要为每层组件手动添加props,就能在组件树间进行数据传递的方法。典型的React应用,数据都是通过props属性有父传子进行传递,但是有些时候太麻烦,也有许多时候这些属性别的组件也需要,于是Context提供了一种在组件之间共享此类值得方式,不必通过组件树的逐层传递props。一、如何使用ContextContext 为了共享对于一个组件树来说是“全局”的数据,例如当前认证的用户、主题或首选语言。举个例子,原创 2021-08-25 08:48:59 · 599 阅读 · 0 评论 -
前端框架react----组件通信
目录前言一、父组件向子组件通信二、子组件向父组件通信三、跨级组件通信四、非嵌套组件通信总结前言前面几篇文章介绍了 React 中的基础知识点,这篇文章将还是通过实例的方式记录一下 React 中组件之间的通信方式。在 React 中,需要组件通信的情况一般有以下几种: 父组件向子组件通信 子组件向父组件通信 跨级组件通信 非嵌套组件通信 一、父组件向子组件通信React 中采用数据单向流动的方式,父组件向子组件传递数据...原创 2021-08-24 08:32:32 · 229 阅读 · 0 评论 -
前端框架react----生命周期
目录前言一、什么是组件的生命周期呢?二、挂在阶段1、constructor(props)2、static getDerivedStateFromProps(props, state)3、render()4、componentDidMount()5、componentWillMount()三、更新阶段1、shouldComponentUpdate(nextProps, nextState)2、getSnapshotBeforeUpdate(prevProps,原创 2021-08-23 08:32:44 · 615 阅读 · 0 评论 -
前端框架react----条件渲染、循环处理、受控组件
一、条件渲染很多时候,用户可能会有多种操作需求,这个时候就需要我们对不同的操作选择不同的执行逻辑。在react中,你可以创建不同的组件来封装各种你需要的行为,react中的条件渲染和JavaScript中的一样,使用JavaScript运算法is或者条件运算符去创建元素来表现当前的状态,然后让React根据它们来更新UI,比如我们创建一个十分简单的登录注册切换,首先,创建两个数组来展示登录或者注册:function Login(props) { return (原创 2021-08-21 06:52:54 · 625 阅读 · 0 评论 -
前端框架react----state、setState、样式、this指向
目录一、state二、this的指向问题三、setState四、设置样式一、state之所以说普通函数创建的组件是无状态组件,而通过 class 创建的组件是有状态组件,就是因为在 class 中 state 的存在。state叫状态,举个例子:人---状态---影响---行为组件---状态----驱动----页面注意:1、在constructor中初始化state。2、为了提高页面 的渲染效率,不要将不需要在页面中展示的数据添加到state中,直接添加给原创 2021-08-19 12:31:12 · 260 阅读 · 0 评论 -
前端框架react----组件+props
目录一、普通组件(函数式组件)二、props三、有状态组件(类组件)一、普通组件(函数式组件)定义组件最简单的方式就是编写 JavaScript 函数:function Welcome(props) { return <h1>Hello, {props.name}</h1>;}该函数是一个有效的 React 组件,因为它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素。这类组件被称为“函数组件”,因为它本质上就是 .原创 2021-08-18 08:32:09 · 219 阅读 · 0 评论 -
前端框架react----初识react+JSX语法
目录前言:一、认识二、准备工作三、react的JSX语法前言:前端现行主流的JS库当然是React框架,它在当下受到越来越多的开发者和项目小组的喜爱,我们可以使用它高效的开发出一系列前端的项目,还有基于react的react-native用来开发原生应用。如果我们想学习react-native之前必须要学习react的内容,接下来的时间我们将学习react框架的基础内容。一、认识当我们接触一个新的知识,我们需要了解三个问题:它是什么?我们可以用它干啥?它有什么..原创 2021-08-17 19:56:07 · 531 阅读 · 0 评论