_

React 高级指引之 Context 1.为什么使用 Context 首先来考虑这样一个场景，有一段文本内容用于展示主题的字体颜色及字体大小。我们可以通过组件的属性来传递，代码如下： 顶层组件，定义主题// 引入中间组件import IntermediaryComponents from './IntermediaryComp'// 顶层组件，定义主题class Context extends React.Component { constructo

React 核心概念（4） 1.表单 1.1 表单概述 这里先给出一个简单的表单示例：import React from 'react';class FormComp extends React.Component { constructor (props) { super(props); } render () { return ( <form> <label htmlFor="us

React 核心概念（3） 1.事件处理 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：（引自： 事件处理 ） React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 1.1 绑定事件 还记得在之前文章中我们写过的增加计数的 class 组件吗？我们这里会再一次用到：import React from 'reac

React 核心概念（2） 1.组件介绍及 props 1.1 组件分类 组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。（引自： 组件 & Props ） 组件分为 class 组件 和 函数组件 两种，下面给出两种组件的简单示例：// 函数组件function FunctionComponent(name, address) { retur

React 核心概念（1） 1.初识 JSX 1.1 JSX 简介 首先我们给出 JSX 的一个简单示例：const element = <h1>Hello, world!</h1>; 上面的标签语法既不是字符串也不是 HTML。 这就是 JSX ，是一个 JavaScript 的语法扩展。React 建议书写代码时配合 JSX 。JSX 可以很直观的描述 UI ，并且具有 JS 的全部功能。 J