茗霜的博客

自定义 Hook通过自定义 Hook，可以将组件逻辑提取到可重用的函数中提取自定义 Hook当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。如下示例中的自定义useFriendStatus的Hookimport { useState, useEffect } from 'react';function useFriendStatus

Hook是什么增强了函数组件的功能状态生命周期hook并不能提供全部生命周期引用使用 State Hook在函数组件中不能使用constructor，不能绑定this来调用函数，可以通过hook模拟this.state,来实现和class组件相似的功能。实例：//引入useState，这个useState就是hookimport React, { useState } from 'react'function App(){ // let arr = useState(0) 初始值

通过使用React Router 实现一个简单的登录Demo，提升对React路由的熟练度。login.jsximport React, { Component } from "react";class inputs extends Component { //设置state数据，通过onChange绑定到对应的input标签中 constructor() { super() this.state = { 'username': ''

基本路由配置<Router> <Route path="/" component={App}> <Route path="about" component={About} /> <Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route>

ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在React应用中，数据是通过props自上而下也就是从父到子进行传递的，这个方式在某些需求下就显得比较繁琐，比如很多公共组件都需要的属性和数据。Context提供了一种在组件之间共享此类值的方式，而不需要再通过组件书对数据进行逐层传递props// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。// 为当前的 theme 创建一个 context（“ligh

Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧转发 refs 到 DOM 组件Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件在下面的示例中，FancyButton 使用 React.forwardRef 来获取传递给它的 ref，然后转发到它渲染的 DOM button：const FancyButton = React.forwardRef((props, ref) => ( <button ref={re

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}动机一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例c

打包大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载import应用中引入代码分割的最佳方式是通过动态 import() 语法。使用前：import { add } from './math';console.log(add(16, 26));使用后：import("./math")

React router 安装npm install --save react-router使用一个支持 CommonJS 或 ES2015 的模块管理器，例如 webpack：// 使用 ES6 的转译器，如 babelimport { Router, Route, Link } from 'react-router'// 不使用 ES6 的转译器var ReactRouter = require('react-router')var Router = ReactRouter.Router

React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件.列入官网的温度计算的demo先写入一个温度输入组件class TemperatureInput extends React.Component { state = { temperature: '' }; hand...

包含关系有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中function FancyBorder(props) { return ( <div className={'FancyBor...

但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。受控组件我对受控组件的理解就是input相关html标签的双向绑定的实现，其原理类似vue中的v-model 的原理，通过 value={this.state.value} 来实现input实时等于state中的value值，然后在 onCh...

我们可以使用 map() 函数让数组中的每一项变双倍，然后我们得到了一个新的列表 doubled 并打印出来const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);在 React 中，把数组转化为元素列表的过程是相似的。渲染多个...

React 的条件渲染和 JavaScript 的方式一样，使用运算符 if 或者 条件运算符 去创建元素来表现当前的状态，然后让 React 去根据它们来更新 UIfunction Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting /&...

React的事件命名为小驼峰式使用 JSX 语法时需要传入一个函数作为事件处理函数例如<button onClick={activateLasers}> Activate Lasers</button>并且在 React 中不能通过返回 false 来的方式阻止默认行为，必须显示调用 preventDefault,例如function Action...

将函数组件转化为class组件通过五步将函数组件转化为class组件创建一个同名的 ES6 class，并且继承于 React.Component。添加一个空的 render() 方法。将函数体移动到 render() 方法之中。在 render() 方法中使用 this.props 替换 props。删除剩余的空函数声明。class Welcome extends React....

1.将React引入到页面中这个引入方法是通过远程的服务器提供的js库。通过 script 标签引入 react<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script><script src="https://cdnjs.cloudflare.com...