• 欢迎交朋友,QQ:2693438633
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏我的博客吧

React教程——React.Component

 Components让我们将UI分割成独立的、可重用的块,而且将它们隔离开来。React.Componet由React类提供。概述:React.Component是一个抽象的基类,所以直接引用React.Component是无意义的。我们需要用类继承它、实现它。并且必须实现render()方法。通常你会用JavaScript的类来定义一个……

React教程(8)——状态提升

经常有这种情况,几个组件需要体现出同一个改变的数据。我们推荐将共享的state提升到离它们最近的祖先。让我们来看一下这如何实现。在这一部分中,我们将创建一个温度计算器来计算在给定温度下水是否会沸腾。我们先创建一个BoilingVercit的组件,它接收摄氏温度作为一个prop,并打印出水会不会沸腾。接着,我们创建一个Calculator的组件,它渲……

React教程(7)——表单

本文由平凡翻译自React官网,转载请注明出处Html表单元素和React的其他DOM元素不一样,因为表单元素天生就有一些内部状态。例如,这个html表单有一个name <form> <label> Name: <input type="text" name="name……

React教程(6)——Lists和Keys

本文由平凡翻译自React官网,转载请注明出处 首先,让我们回顾在JavaScript中是怎么变换列表的。在下面的代码中,我们使用map()函数接收一个numbers数组并且将它的每个值都乘以2。将结果返回给了新的数组double,并且在控制台上输出它的值: const numbers = [1, 2, 3, 4……

React教程(5)—处理事件与条件渲染

处理事件用React的element处理事件和用DOM的元素处理事件很相似。但有几处语法不同:React的事件使用camel(驼峰)命名,而不是小写。使用JSX,你传一个函数当作事件处理器,而不是传一个字符串。例如,HTML形式: <button onclick="activateLasers()"> ……

React教程(4)——State和Lifecycle

 考虑前面的时钟例子。到目前为止,我们只学习了一种更新UI的方式。我们通过不断调用ReactDOM.render() 来改变渲染的输出(一秒钟一次)。 function tick() { const element = ( <div> <h1>Hello, wo……

React教程(3)——Component和Props

 Component可以帮助你将UI分成几个独立的、可重用的部分,只需要考虑单独的部分(高内聚,低耦合)。从概念上来说,components就像JavaScript里面的函数。它们接收任意的输入(这种输入叫做props),返回React elements以描述屏幕上应该展示什么内容。用函数与类写Components最简单定义componen……

React教程(2)——Element

渲染Elements(元素)Elements是React应用中最小的模块。一个Element描述了你想在屏幕上显示出什么:(记住这句话,有助于理解element的本质) const element = <h1>Hello, world</h1>; ……

React教程(1)——JSX

1.前言    JSX对于React不是必须的,但它可以使创建组件更加容易,JSX允许你以类XML句法创建JavaScript对象,无论是DOM元素还是React Components。 2. JSX简介:考虑以下声明: const element =<h1> hello world &……