![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react入门教程
Super苹果核
这个作者很懒,什么都没留下…
展开
-
一、安装React
一、安装ReactReact是灵活的,可以在各种类型的项目中使用。 你可以使用它创建一个全新的应用程序,也可以逐步将其引入现有的项目中,而不需要重写整个项目。创建一个单页面应用Create React App是开始构建新的React单页应用程序的最佳方式。 它可以帮助您快速集成您的开发环境,以便您可以使用最新的JavaScript功能,它提供了一个很好的开发体验,并可以有效转载 2017-06-30 15:21:03 · 209 阅读 · 0 评论 -
十四、refs和DOM元素
十四、refs和DOM元素在典型的React数据流中,props是父组件与其子组件交互的唯一方式。 要修改子组件,需要使用一个新的props进行重新渲染。但是,在某些情况下,您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例,也可以是DOM元素。 对于这两种情况,React提供了一个以下这样的功能。通过ref属性设置回调函数React提供转载 2017-06-30 15:34:02 · 261 阅读 · 0 评论 -
十五、不可控组件
十五、不可控组件在大多数情况下,我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中,表单数据由React组件处理。 替代方法是使用不可控组件,其中表单数据是由DOM本身处理。要编写不可控组件,不需要为每个状态更新都去编写事件处理程序,你可以直接使用ref从DOM获取表单值。例如,此代码在不可控组件中接受一个name:class Name转载 2017-06-30 15:38:43 · 307 阅读 · 0 评论 -
十六、性能优化
十六、性能优化在React内部,React使用了几种比较聪明的技术来实现最小化更新UI所需的昂贵的DOM操作的数量。对于许多应用来说,使用React将很快速的渲染出用户界面,从而无需进行大量工作来专门做优化性能的工作。大概有以下有几种方法来加快你的React应用程序。使用生产环境的配置进行构建如果你在React应用中进行基准测试或这遇到了性能问题,请首先确保转载 2017-06-30 15:39:10 · 187 阅读 · 0 评论 -
十七、不使用ES6编写React应用
十七、不使用ES6编写React应用通常你可以使用一个JavaScript的class功能来定义一个React组件:class Greeting extends React.Component { render() { return h1>hello {this.props.name}h1>; }}要是你还没有使用ES6的话,你就得使用Reac转载 2017-06-30 15:39:56 · 198 阅读 · 0 评论 -
十八、不使用JSX编写React应用
十八、不使用JSX编写React应用React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX,那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。每个JSX元素只是调用React.createElement(component,props,... children)的语法糖。 所以,你用JSX做的任何事也可以使用纯Javascr转载 2017-06-30 15:40:54 · 1230 阅读 · 0 评论 -
十九、彻底理解React如何重新处理DOM(Diffing算法)
十九、彻底理解React如何重新处理DOM(Diffing算法)React提供了一个声明式的API,所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的,不过这也让编写应用变得更加容易。本文会详细解释在React中的“diffing”算法是怎么做的,以便组件更新是可预测的,从而让高性能应用变得足够快。动机当使用Re转载 2017-06-30 15:41:12 · 411 阅读 · 0 评论 -
二十、用上下文管理应用
二十、用上下文管理应用使用React可以很容易通过React组件跟踪数据流。 当你看到一个组件,你就可以看到哪些props正在传递,这使得你的应用很容易知道在做什么。在某些情况下,你希望通过组件树传递数据,而不是在每个级别的中组件手动传递props,你可以直接在React中使用强大的“context”来做到这一点。为什么不去使用Context绝大多数的应用不需要直接转载 2017-06-30 15:42:29 · 212 阅读 · 0 评论 -
二十一、React顶级API
二十一、React顶级API全局变量React是React库的入口。如果你通过一个script标签使用的React,那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6,你可以这样写:import React from 'react';。你是通过npm使用的ES5,你可以这样写var React = require('react');。转载 2017-07-01 14:53:14 · 277 阅读 · 0 评论 -
二十二、React.Component用法
二十二、React.Component用法组件(Components)允许您将UI拆分为独立的可重用的部分,并单独的考虑每个部分。总览React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类,并且至少定义一个render()方法即可使用。你可以使用ES6中class定义一个React组件:c转载 2017-07-01 15:06:36 · 607 阅读 · 0 评论 -
二十三、ReactDOM用法
二十三、ReactDOM用法如果你使用script标签引用React,那么这些顶级API在全局变量ReactDOM上可直接使用。如果你使用了ES6和npm,你可以这么写import ReactDOM from 'react-dom'。如果你使用ES5和npm,你可以这写var ReactDOM = require('react-dom')。总览react-dom包提供了转载 2017-07-01 15:07:23 · 515 阅读 · 0 评论 -
十三、使用PropTypes进行类型检测
十三、使用PropTypes进行类型检测随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScript)对整个应用程序进行类型检查。即使你不使用这些,React也有一些内置的typechecking能力。 要在组件的props上运行typechecking,可以分配特殊的prop转载 2017-06-30 15:32:47 · 683 阅读 · 0 评论 -
十二、深入理解JSX
十二、深入理解JSX从根本上讲,JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码:"blue" shadow={2}> Click Me/MyButton>经过编译后为:React.createElement( MyButton, {color转载 2017-06-30 15:31:48 · 397 阅读 · 0 评论 -
二、JSX的介绍
二、JSX的介绍首先,请考虑下面的变量声明:const element = h1>hello worldh1>;这个有趣的标签语法,因为它既不是字符串也不是HTML。它被称为JSX,它是JavaScript的语法扩展。 我们建议使用它和React一起使用,以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言,但是它具有JavaScript的全部能力。J转载 2017-06-30 15:22:15 · 379 阅读 · 0 评论 -
三、渲染元素
三、渲染元素React元素是React应用程序的最小构建结构。React元素描述了您想在屏幕上看到什么:const element = h1>hello worldh1>;与浏览器DOM元素不同,React元素是纯对象,创建起来很方便。 React DOM负责匹配React元素并更新DOM。note人们可能将元素与更广为人知的“组件”概念混淆。 我们将在下一节中介绍转载 2017-06-30 15:23:02 · 362 阅读 · 0 评论 -
四、组件化和属性(props)
四、组件化和属性(props)组件允许您将UI拆分为独立的可重用的部分,并单独地考虑每个部分。从概念上讲,组件就像JavaScript函数。 它们接受任意输入(称为“props”),并返回应该出现在屏幕上的React元素。功能性组件(functional)和类组件(class component)定义组件的最简单的方法是编写JavaScript函数:function W转载 2017-06-30 15:23:52 · 627 阅读 · 0 评论 -
五、State和生命周期
五、State和生命周期考虑前面部分中的滴答时钟示例(第三章)。到目前为止,我们只学习了一种更新UI的方法。我们调用ReactDOM.render()来改变渲染输出:import React from 'react';import ReactDOM from 'react-dom';function tick() { const element = (转载 2017-06-30 15:25:25 · 470 阅读 · 0 评论 -
六、事件处理
六、事件处理使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异:React事件使用驼峰命名法,而不是全部小写命名。使用JSX你传递一个函数作为事件处理程序,而不是一个字符串。例如,HTML:button onclick="activeLasers()"> Active Lasersbutton>在Reac转载 2017-06-30 15:27:29 · 232 阅读 · 0 评论 -
七、根据条件选择性渲染元素
七、根据条件选择性渲染元素在React中,您可以根据所需行为来创建并封装的不同组件。 然后,您可以根据某些条件来仅仅渲染其中的某一些。当然,这具体取决于当前应用程序的状态。React中的分条件渲染与JavaScript中的分条件工作方式相同。 使用JavaScript运算符(如if或条件运算符)来创建一个表示当前状态的元素,让React匹配它们然后更新UI。考虑这两个组件:转载 2017-06-30 15:28:21 · 662 阅读 · 0 评论 -
八、Lists和Keys的处理
八、Lists和Keys的处理首先,让我们回顾一下如何在JavaScript中遍历lists。下面的代码,我们使用map()函数获取一个数字数组,并将它们的值加倍。 我们将map()返回的新数组赋给变量doubled并记录下来:const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map(item => item转载 2017-06-30 15:29:05 · 349 阅读 · 0 评论 -
九、表单处理
九、表单处理HTML表单元素与React中的其他DOM元素有点不同,因为表单元素自然地保留一些内部状态。 例如,这种采用纯HTML格式的表单接受单个name:form> label> Name: input type="text" name="name" /> label> input type="submit" value="S转载 2017-06-30 15:29:41 · 180 阅读 · 0 评论 -
十、提升state
十、提升state通常,如果有几个组件需要反映相同的变化数据。 我们建议将共享state提升到层级最近的,并且是共同的父组件上。 让我们看看这是如何工作的。在本节中,我们将创建一个温度计算器来计算水是否在给定温度下沸腾。我们将从一个名为BoilingVerdict的组件开始。 它接受celsius(摄氏温度)作为props,并打印是否足以煮沸水:function Boi转载 2017-06-30 15:30:24 · 259 阅读 · 0 评论 -
十一、组合 VS 继承
十一、组合 VS 继承React具有强大的组合模式,我们建议使用组合而不是继承来重用组件之间的代码。在本节中,我们将考虑一些新的React常常遇到的开发继承的问题,并展示如何使用组合来解决它们。有容乃大一些组件提前不知道它们的子组件是什么的。 这对于像Sidebar或Dialog这样的代表通用“框”的组件是特别常见的。我们建议这些组件使用特殊的children属转载 2017-06-30 15:31:04 · 183 阅读 · 0 评论 -
二十四、DOM Elements
二十四、DOM ElementsReact实现了一个独立于浏览器的DOM系统,用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现(恶心的原生DOM操作)。在React中,所有DOM properties 和 attributes(包括event handle)都应该是驼峰命名法。 例如,HTML属性tabindex对应于React中转载 2017-07-01 15:08:35 · 228 阅读 · 0 评论