茗霜的博客

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

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

通过使用React Router 实现一个简单的登录Demo，提升对React路由的熟练度。 login.jsx import 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>

Context Context 提供了一个无需为每层组件手动添加 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 的转译器，如 babel import { 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 去根据它们来更新 UI function 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...