一杯绿茶

一杯绿茶 查看完整档案

杭州编辑  |  填写毕业院校海康威视  |  前端开发 编辑 github.com/Jiacheng787 编辑
编辑

人在一起就是过节,心在一起就是团圆

个人动态

一杯绿茶 发布了文章 · 11月19日

React调试工具安装

先去git上下载react-devtools文件到本地,直接下载zip就行https://github.com/facebook/r...

下载之后解压,进入下载的文件夹,用npm安装依赖。

安装完成后,打包一份扩展程序出来,npm run build:extension:chrome

打出来的扩展程序在react-devtools -> shells -> chrome -> build -> unpacked文件夹

把unpacked文件夹拖到Chrome扩展程序里面就可以了。

参考:
最简单的安装React Devtools调试工具

查看原文

赞 1 收藏 1 评论 0

一杯绿茶 关注了用户 · 11月18日

薄荷前端 @boohee

薄荷前端周刊,希望能够给一起走在前端路上的你带来一点小小的帮助。https://github.com/BooheeFE,欢迎Watch & Star ★

关注 1075

一杯绿茶 发布了文章 · 11月16日

React内容汇总

本人技术栈是Vue,最近调部门改成用React开发,从头开始踩坑,持续更新中~

11月30日内容汇总

React 中动态加载组件

React.lazy() 允许你定义一个动态加载的组件。这有助于缩减 bundle 的体积,并延迟加载在初次渲染时未用到的组件。

const SomeComponent = React.lazy(() => import('./SomeComponent'));
使用 React.lazy 的动态引入特性需要 JS 环境支持 Promise。在 IE11 及以下版本的浏览器中需要通过引入 polyfill 来使用该特性。

Vue 这个被称为异步组件,也是利用 Promise 来实现的。

Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

React 中的 style

React 中的 style 并不是 Vue 中的双大括号,最外面那个括号代表内部是 JS 表达式,里面的括号是 JS 对象。所以多个样式之间用 , 分隔,原生的 HTML 行内样式用 ; 分隔,样式属性命名采用小驼峰法。

style 通常用来绑定动态样式,元素的主要样式应该使用外部引入的 CSS 样式表
function HelloWorldComponent() {
  return <div style={{color: blue, fontSize: 14px}}>Hello World!</div>;
}

既然 style 其实是 JS 对象,那么就可以把对象抽出来,从而实现动态样式:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}
在 Vue 中可以通过计算属性实现动态样式

React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位,请将此值设为数字与所需单位组成的字符串。

// Result style: '10px'
<div style={{ height: 10 }}> Hello World! </div>

// Result style: '10%'
<div style={{ height: '10%' }}> Hello World! </div>
但并非所有样式属性都转换为像素字符串。有些样式属性是没有单位的(例如 zoomorderflex)

className 和 htmlFor

由于 classfor 都是 JS 关键字,所以在 React 里面使用 classNamehtmlFor 代替。

dangerouslySetInnerHTML

React 中使用 dangerouslySetInnerHTML 渲染 HTML,尽量不要用,容易导致 XSS 攻击。

// 需要传一个 key 为 __html 的对象
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
Vue 中使用 v-html 指令渲染 HTML

11月19日内容汇总

JSX 的一些注意事项

使用 JSX 必须在 React 作用域内,这样才能编译。在如下代码中,虽然 ReactCustomButton 并没有被直接使用,但还是需要导入:

import React from 'react';
import CustomButton from './CustomButton';

function WarningButton() {
     return <CustomButton color="red" />;
}

JSX 中可以使用点语法,例如:

<React.Fragment></React.Fragment>
<Form.Item></Form.Item>

自定义组件必须大写字母开头,才能被识别为 React 组件。

React 组件名不能是 JS 表达式,如果需要动态渲染组件,需要先将 组件名赋值给一个大写字母开头的变量:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

与 Vue 类似,React 的 props 花括号里面接受 JS 表达式:

// React 用法
<MyComponent foo={isShow ? "1" : "0"} />
// Vue 用法
<my-component :foo="isShow ? '1' : '0'" />

if 语句以及 for 循环不是 JavaScript 表达式,所以不能在 JSX 中直接使用。但是,你可以用在 JSX 以外的代码中。

React 组件通过 props 传字符串有两种做法,第一种直接通过字符串字面量:

// React 用法
<MyComponent message="hello world" />
// Vue 用法
<my-component message="hello world" />

另一种是通过表达式:

// React 用法
<MyComponent message={'hello world'} />
// Vue 用法
<my-component :message="`hello world`" /> // Vue的属性前面加上v-bind,后面的""里面就是JS表达式

React 如果没有给 props 赋值,它会有一个默认值 true

这点我觉得还是 Vue 做得好,可以手动指定 props 的默认值和类型,类型传错了还会给你警告,维护起来相当方便

React 中的 props 对象可以进行属性展开,下面两个组件是等价的:

function App1() {
    return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
    const props = {firstName: 'Ben', lastName: 'Hector'};
    return <Greeting {...props} />;
}

下面这个技巧非常有用,选择只保留当前组件需要接收的 props,并使用展开运算符将其他 props 传递下去:

const Button = props => {
    const { kind, ...other } = props;
    const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
    return <button className={className} {...other} />;
};

高阶组件

高阶组件在 React 官方文档的说法是用于替代 mixins 实现组件方法复用。

高阶组件是参数为组件,返回值为新组件的函数

也就是说在组件外面封装了一层,把可以复用的方法都抽出来。

我看了一下文档的示例代码,觉得高阶组件的场景和 mixins 其实还是有区别的,而且 mixins 是可以全局混入的。文档上的示例我觉得更接近于 Vue 中的动态组件。

function withSubscription(WrappedComponent, selectData) {
  // ...并返回另一个组件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    componentDidMount() {
      DataSource.addChangeListener(this.handleChange);
    }
    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }
    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }
    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

使用的时候把组件传递给 withSubscription() :

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

之前不理解React 路由为什么要这样写,现在明白了,这其实就是高阶组件:

const NavbarWithRouter = withRouter(Navbar);

Vue 动态组件的 is 属性也可以接收一个组件作为参数,同时也能传递 props

<component :is="currentTabComponent" :values="values"></component>

11月18日内容汇总

React 组件生命周期调用顺序

挂载

组件实例被创建并插入DOM
  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

更新

当组件的 props 或 state 发生变化时会触发更新
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

卸载

当组件从 DOM 中移除时会进行调用
  • componentWillUnmount()

错误处理

当渲染过程,生命周期,或子组件的构造函数中抛出错误时会进行调用
  • static getDerivedStateFromError()
  • componentDidCatch()

更多内容参考:
常用生命周期方法

2.x 的生命周期函数与新版 Composition API 之间的映射关系:

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

注意:beforeCreatecreatedVue3 中已经由 setup 替代。

参考资料

Vue 3.0 有很多借鉴了 React 的地方,看了 React 文档之后 可以对比着看下 Vue 3.0 。

Vue 3.0 修炼手册
抄笔记:尤雨溪在Vue3.0 Beta直播里聊到了这些…
API 手册 - Vue 组合式 API

Koa 快速入门系列

【从前端到全栈】- koa快速入门指南
【进阶篇】koa+Mysql的全栈之旅
【全栈之旅】NodeJs登录流程以及Token身份验证

11月17日内容汇总

React Hooks的用法

函数组件有重大限制,必须是纯函数,不能包含状态,也不支持生命周期方法。React Hooks 的设计目的,就是加强版函数组件,完全不使用"类",就能写出一个全功能的组件。

四个常用Hooks

useState()
useContext()
useReducer()
useEffect()

useState() 用于为函数组件引入状态(state)。纯函数不能有状态,所以把状态放在钩子里面。

import React, { useState } from "react";

export default function  Button()  {
  const [buttonText, setButtonText] = useState("Click me,   please");

  function handleClick()  {
    return setButtonText("Thanks, been clicked!");
  }

  return  <button  onClick={handleClick}>{buttonText}</button>;
}

useEffect()用来引入具有副作用的操作,最常见的就是向服务器请求数据。以前,放在componentDidMount里面的代码,现在可以放在useEffect()

useEffect(()  =>  {
 // 这里调接口
}, [dependencies])

useEffect() 接受两个参数。第一个参数是一个函数,异步操作的代码放在里面。第二个参数是一个数组,用于给出 Effect 的依赖项,可以省略。组件第一次渲染时, useEffect() 就会执行。当依赖项的数组发生变化, useEffect() 也会执行。

Vue 3.0 的 Composition API 借鉴了 React Hooks

轻松学会 React 钩子:以 useEffect() 为例 - 阮一峰
React Hooks 入门教程 - 阮一峰

React中Fragment的用法

与 Vue 类似, React 组件要求 return 的内容必须由唯一根元素包裹,否则就会报错。

如果希望在不额外创建DOM元素的情况下 return 多个元素,就可以用到Fragment。

render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}
Vue 中的 template 也是虚拟元素,但还是有区别
在 template 中的元素必须要唯一根元素包裹
template 仅仅只是在条件渲染的时候可以不用引入新的DOM元素
Vue 3.0 中也提供了类似 React 的 Fragment

Fragment还有一种简写语法 <></> 。<React.Fragment>可以接受键值或者属性,例如在列表渲染的时候绑定 key ,但是 <></> 不行。

render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
    </>
  );
}

另外react 16开始, render支持返回数组,可以减少不必要的节点嵌套。

export default function () {
    return [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ];
}
Vue 3.0 的 render 函数同样也支持返回数组

Fragment - React中文文档

组件继承的两种写法

以上面的Fragment为例,如果只引入 React ,那么使用就要像这样 <React.Fragment>

import React from "react";

function App() {
    return (
        <React.Fragment>
            {/* Some text here */}
        </React.Fragment>
    )
}

如果像下面这样引入,就可以像这样使用 <Fragment>

import React, { Fragment } from "react";

function App() {
    return (
        <Fragment>
            {/* Some text here */}
        </Fragment>
    )
}

严格模式

嵌套在 <StrictMode> 标签中的元素将开启严格模式,用来突出显示应用程序中潜在问题。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

严格模式检查仅在开发模式下运行;它们不会影响生产构建
import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

React’s diff algorithm

11月16日内容汇总

React事件类型

输入框:onChange,onKeyUp
按钮:onClick

React监听回车事件

<Input placeholder="www.chao99.top" onKeyUp={this.onKeyup} />
onKeyup(e) {
    if(e.keyCode === 13) {
        this.handleBtnClick()
    }
}

报错信息

Cannot update during an existing state transition (such as within render)

这个一般是事件处理函数的 this 没有绑定导致的 。

报错信息

Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field.

受控组件表单必须要绑定 onChange 事件,否则这个表单就是只读,无法修改。

不能修改的前提是 value 被赋了一个常量。如果将空值 null 赋给 value ,还是可以修改的。

受控组件:自身的value值由组件的state托管,这也是 React 官方推荐的。

<Input value={this.state.name} onChange={this.handleChange} />

上面的代码中, value 用来给表单赋值, onChange 事件用于触发事件处理函数修改 state 。在 Vue 中直接就是一个语法糖 v-model

Vue 中的 <input v-model="searchText"> 等价于
<input :value="searchText" @input="searchText = $event.target.value">

非受控组件:value由第三方库或者DOM进行托管。

<Input type="file" ref={this.input}/>

文件上传是典型的非受控组件。

React修改antd原生样式

在 Vue 中直接修改是不生效的,需要通过样式穿透 >>>::v-deep

在 React 里面,调出控制台找到组件对应的类名,然后在样式文件中直接修改就行。

React修改Antd组件样式的方法

查看原文

赞 0 收藏 0 评论 0

一杯绿茶 发布了文章 · 11月15日

React 核心概念整理

最近调部门,改用React开发了,整理一些常用知识点。

更多内容还请参考:
React 中文文档
Ant Design

1. 项目创建

# 创建项目
npx create-react-app your-project-name

# antd
npm i antd

# 路由
npm i react-router-dom

2. 启动服务

npm start
Vue 脚手架构建的项目使用 npm run serve

3. 安装插件

VS Code安装ES 7,非常方便生成组件代码

创建 Login.js 文件

输入 rfce 按回车,就可以初始化一个组件代码

import React from 'react'

function Login() {
    return (
        <div>
        
        </div>
    )
}

export default Login

4. 创建路由

1)简单实现

打开根目录中的 index.js 文件,引入路由模块,添加如下代码:

import React from 'react';
import ReactDOM from 'react-dom';
// 引入路由模块,使用哈希路由
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
import './index.css';
// 引入组件
// 不用自己引入,当用到的时候,编辑器会自动添加
import Login from './pages.Login';
import List from './pages/admin/products/List';

ReactDOM,render(<Router>
    <Switch>
        <Route path="/login" component={Login} />
        <Route path="/admin/products" component={List} />
    </Switch>
</Router>, document.getElementById('root'));
React 里面的 index.js 相当于 Vue 的 main.js 文件

2)正常用法

在开发中一般不会这样写,而是在根目录下建一个 routes 目录,在 routes 目录下建 index.js 文件,添加如下代码:

import Login from "../pages/Login";
import Index from "../pages/admin/dashboard/Index";
import List from "../pages/admin/products/List";
import Edit from "../pages/admin/products/Edit";

// 普通页面路由
export const mainRoutes = [{
    path: '/login',
    component: Login
}, {
    path: '/404',
    component: PageNotFound
}]

// 需要鉴权的路由
export const adminRoutes = [{
    path: '/admin/dashboard',
    component: Index
}, {
    path: '/admin/products',
    component: List,
    exact: true // 路由path和下面重复了,需要设置一下,只匹配当前path
}, {
    path: '/admin/products/edit/:id',
    component: Edit
}]

然后 index.js 文件可以改成下面这样:

import React from 'react';
import ReactDOM from 'react-dom';
// 引入路由模块,使用哈希路由
import {
    HashRouter as Router,
    Switch,
    Route,
    Redirect
} from 'react-router-dom';
import './index.css';
import { mainRoutes } from "./routes";

ReactDOM,render(
    <Router>
        <Switch>
            { mainRoutes.map(route => {
                // return <Route key={route.path} path={route.path} component={route.component} />
                // 由于route里面的key也是path和component,所以可以直接用ES6延展运算符
                return <Route key={route.path} {...route} />
            }) }
            <!-- 当找不到页面的时候就重定向到404 -->
            <Redirect to="/404" />
        </Switch>
    </Router>,
    document.getElementById('root')
);

3)嵌套路由

当访问的地址以 /admin 开头的时候,都走 App 这个容器。

index.js 文件中再加一个 Route,代码如下:

import React from 'react';
import ReactDOM from 'react-dom';
import {
    HashRouter as Router,
    Switch,
    Route,
    Redirect
} from 'react-router-dom';
import './index.css';
import App from "./App";
import { mainRoutes } from "./routes";

ReactDOM,render(
    <Router>
        <!-- 这里再加一个Route,把路由属性传过去 -->
        <Route path="/admin" render={routeProps => <App {...routeProps} />} />
        <Switch>
            { mainRoutes.map(route => {
                return <Route key={route.path} {...route} />
            }) }
            <Redirect to="/404" />
        </Switch>
    </Router>,
    document.getElementById('root')
);

然后在 App.js 里面添加如下代码:

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { adminRoutes } from './routes';

function App() {
    return (
        <div className="App">
            <h1>这是App组件</h1>
            <Switch>
                {adminRoutes.map(route => {
                    return (
                        <Route
                            key={route.path}
                            path={route.path}
                            exact={route.exact}
                            render={routeProps => {
                                return <route.component {...routeProps} />
                            }}
                        />
                    )
                })}
                <Redirect to="/404" />
            </Switch>
        </div>
    )
}

export default App
React 里面的 <Switch> 相当于 Vue 的 <router-view>

问题:Vue 可以直接定义嵌套路由,React 可以吗

5. 搭建页面框架

1)组件中引入图片

import React from 'react';
import logo from "./logo.png";

function App() {
    return (
        <div className="logo">
            <img data-original={logo} alt="logo" />
        </div>
    )
}

export default App

2)定义行内样式

import React from 'react';

function App() {
    return (
        <div style={{ background: "#fff" }}>
        </div>
        <div style={{ height: "100%", borderRight: 0 }}>
        </div>
        <div style={{ padding: "0 24px 24px" }}>
        </div>
        <div style={{ margin: "16px 0" }}>
        </div>
    )
}

export default App
在 React 中 {} 内部其实就是 JS 表达式

样式其实是以 JS 对象形式定义的

style 看上去是双大括号,但其实两层括号是不一样的,外层括号代表里面定义的是 JS 表达式,内层括号代表 JS 对象

3)路由点击跳转

import React from 'react';
// 在组件中使用路由需要用到 withRouter 插件,否则会报错
import { withRouter } from "react-router-dom";
// 在组件中引入 antd
import { Layout, Menu, Breadcrumb, Icon } from "antd";
import { adminRoutes } from "../../routes/index";

const routes = adminRoutes.filter(route => route.isShow);
function Index() {
    return (
        <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
        >
            {routes.map(route => {
                return (
                    <Menu.Item
                        key={route.path}
                        onClick={p => props.history.push(p.key)}
                    >
                        <Icon type={route.icon}
                        {route.title}
                    </Menu.Item>
                )
            })}
        </Menu>
    )
}

export default withRouter(Index); // 这里需要把组件套进去
问题:Vue 可以直接通过全局方法 this.$router.push() 实现路由跳转,React 没有吗

问题:React 的 antd 组件能否全局注册

4)列表页面搭建

import React from 'react';
import { Card, Table, Button, Popconfirm } from "antd";

// 数据源
const dataSource = [{
    id: 1,
    name: "Jack",
    price: 8888
}, {
    id: 2,
    name: "Pony",
    price: 2333
}, {
    id: 3,
    name: "Eric",
    price: 9999
}]

function List() {
    // 表头字段
    const columns = [{
        title: '序号',
        key: "id",
        width: 80,
        align: "center",
        render: (txt, record, index) => index + 1 // 自定义字段类型
    }, {
        title: "名字",
        dataIndex: "name" // 对应 dataSource 里面的 name 字段
    }, {
        title: "价格",
        dataIndex: "price" // 对应 dataSource 里面的 price 字段
    }, {
        title: "操作",
        render: (txt, record, index) => {
            return (
                <div>
                    <Button type="primary" size="small">修改</Button>
                    <Popconfirm
                        title="确定删除此项?"
                        onCancel={() => console.log("用户取消删除!")}
                        onConfirm={() => console.log("用户确认删除!")}
                    >
                        <Button style={{ margin: "0 1rem" }} size="small">删除</Button>
                    </Popconfirm>
                </div>
            )
        }
    }]
    
    return (
        <Card
            title="商品列表"
            extra={
                <!-- 这里是扩展项 -->
                <Button type="primary" size="small">
                    新增
                </Button>
            }
        >
            <Table columns={columns}
                   bordered
                   dataSource={dataSource}
            />
        </Card>
    )
}

export default List;
React 列表自定义字段类型通过 render 实现, 在 Vue 中则是通过 slot 实现

6. 函数组件和 Class 组件

函数组件适合一些比较简单的应用场景,只接受外面传进来的 props , 没有自己的私有数据 state :

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

如果需要用到私有数据 state 就要创建 Class 组件,Class 需要继承 React.Component

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
Class 组件的 render() 方法返回的东西就是函数组件里面的内容

render() 方法里面需要通过 this 访问 propsstate

7. 事件处理

在 React 中事件的命名采用小驼峰法,而在传统 HTML 中是纯小写。

<button onClick={activateLasers}>
  Activate Lasers
</button>

在 React 中必须显式地使用 preventDefault 阻止默认事件,而在传统 HTML 中可以直接 return false ,代码如下:

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}
在这里,e 是一个合成事件。React 事件与原生事件不完全相同。

1)事件处理函数 this 的绑定

a)在构造器中绑定 this

在 JavaScript 中,class 的方法默认不会绑定this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 为了在回调中使用 `this`,这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

如果觉得使用 bind 很麻烦,这里有两种方式可以解决。

b)使用 class fields

一种是可以使用 class fields 正确的绑定回调函数,Create React App 默认启用此语法:

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

c)使用箭头函数

另一种是可以在回调中使用箭头函数,此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下,这没什么问题,但如果该回调函数作为 prop 传入子组件时,这些组件可能会进行额外的重新渲染:

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

2)向事件处理函数传递参数

下面两种方式是等价的。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数会被隐式的进行传递。

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

8. 条件渲染

基础用法:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false};
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

与运算符 &&

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}
之所以能这样做,是因为在 JavaScript 中,true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。因此,如果条件是 true&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。

在上面的代码中,如果 count 的值为0,还是会进行渲染。

三元运算符

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

9. 状态提升

实际上就是子组件向父组件传参

子组件代码:

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // 向外传递自定义事件
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

父组件代码:

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  <!-- 自定义事件处理函数 -->
  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <!-- 绑定自定义事件处理函数 -->
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}
在 React 中使用 this.props.onTemperatureChange(e.target.value); 向外传递事件同时携带参数

相当于 Vue 中的 this.$emit("onTemperatureChange", e.targetvalue)

查看原文

赞 1 收藏 1 评论 0

一杯绿茶 发布了文章 · 10月18日

JS生成链表和二叉树

最近刷算法题,经常有链表和二叉树的结构,在线运行代码都是直接传入链表或者二叉树的头节点,但是JS中没有这样的结构,本地没办法进行调试。今天专门写了下JS生成链表和二叉树的方法,下次本地调试就可以直接生成测试用例了。

链表生成

代码如下:

// ListNode构造器,用于创建链表的每个节点
class ListNode {
    constructor(val, next) {
        this.val = (val == undefined ? 0 : val);
        this.next = (next == undefined ? null : next);
    }
}

// 生成链表
function generateLinklist(arr) {
    let head = new ListNode(arr[0]), // 初始化第一个节点作为头节点
        curr = head; // curr指针保存当前节点
    for(let i=1; i<arr.length; i++) {
        curr.next = new ListNode(arr[i]); // 创建next节点
        curr = curr.next; // curr后移一位
    }
    return head // 返回头节点
}

// 调用
const head = generateLinklist([1, 2, 3, 4]);
console.log(head); // 1 -> 2 -> 3 -> 4

实现思路还是比较简单的,但是有一个地方需要注意,curr只能保存当前节点,即下一节点还没创建的时候不能提前移动。生成链表的方法本人最开始是这样写的:

// 注意,下面这段代码是错误的
function generateLinklist(arr) {
    let obj = new Linklist(arr[0]),
        curr = obj.next;
    for(let i=1; i<arr.length; i++) {
        curr = new Linklist(arr[i]);
        curr = curr.next;
    }
    return obj
}

上面的代码咋一看好像也没问题,但是拿上面用例进行测试的时候发现返回的链表只有一个节点,后面都不见了:

ListNode { val: 1, next: null }

这段代码的问题就在于,curr提前进行移动了。上面的代码中,先初始化第一个节点obj作为头节点,然后curr = obj.next的本意是希望curr指向obj的下一节点。但是curr并没有指向“下一节点”,而是指向了null,因为下一节点根本还没创建。因为obj.next == null,所以curr = obj.next相当于curr = null,如下图所示:

image.png

这样一来,执行curr = new Linklist(arr[i]);的时候,链表的第二个节点的指针其实是赋给了curr,而不是obj.next

image.png

后面每一次for循环,都是先将新的节点指针赋给curr,然后执行curr = curr.next;curr的值改为null,而这些操作都与obj无关,obj还是最开始那个创建的头节点。

所以从这里得出一个结论,当下一节点还未创建的时候,指针不能提前移动。在第一段代码中,我们看到是先创建节点,再移动curr指针的。

二叉树生成

层序遍历的反向操作,也是利用队列实现,代码如下:

// treeNode构造器
class treeNode {
    constructor(val, left, right) {
        this.val = (val == undefined ? 0 : val);
        this.left = (left == undefined ? null : left);
        this.right = (right == undefined ? null : right);
    }
}

// 生成二叉树
function generateBinarySearchTree(arr) {
    let root = new treeNode(arr[0]),
        curr = root,
        queue = new Array(),
        n = 0;
    queue.push(curr);
    while(queue.length > 0) {
        let size = queue.length;
        for(let i=0; i<size; i++) {
            curr = queue.pop();
            curr.left = arr[n+1] ? new treeNode(arr[n+1]) : null;
            curr.left && queue.unshift(curr.left); // 如果是null就不入队
            n++;

            curr.right = arr[n+1] ? new treeNode(arr[n+1]) : null;
            curr.right && queue.unshift(curr.right); // 如果是null就不入队
            n++;
        }
    }
    return root
}

generateBinarySearchTree([1, 2, 3, 4, 5, 6, 7])

代码感觉有些地方可以优化,有空再改下。

查看原文

赞 0 收藏 0 评论 0

一杯绿茶 发布了文章 · 10月13日

二叉树遍历JS实现和LeetCode题解

基本概念

二叉树遍历主要为深度优先(DFS)和广度优先(BFS),其中深度优先遍历包括前序、中序、后序,广度优先遍历也叫层序遍历。
image.png
深度优先三种方法遍历顺序:
image.png

其实很好记,就是中间节点在最前面、中间和最后面输出,而左右的相对顺序是固定的。

例如下面这棵树:

    1
   / \
  2   3
 / \ / \
4  5 6  7

前序遍历:1, 2, 4, 5, 3, 6, 7
中序遍历:4, 2, 5, 1, 6, 3, 7
后序遍历:4, 5, 2, 6, 7, 3, 1

深度优先和广度优先都能通过递归实现,由于递归方法过于简单,面试考察的通常是非递归实现。深度优先的非递归方法通过堆栈实现,广度优先的非递归方法通过队列实现

递归实现

前序遍历:

function preOrder(root) {
    if (root == null)
        return;
    console.log(root.val); // 输出控制
    preOrder(root.left);
    preOrder(root.right);
}

而中序遍历和后序遍历则只需修改输出控制的位置。

中序遍历:

function inOrder(root) {
    if (root == null)
        return;
    inOrder(root.left);
    console.log(root.val); // 输出控制
    inOrder(root.right);
}

后序遍历:

function postOrder(root) {
    if (root == null)
        return;
    postOrder(root.left);
    postOrder(root.right);
    console.log(root.val); // 输出控制
}

非递归实现

非递归版本使用堆栈实现,三种遍历方法主要是压栈弹栈的顺序不同。

前序遍历

一开始先把根节点压栈,每次弹出栈顶元素的同时输出该元素,然后把栈顶元素的右节点、左节点分别入栈(如果有的话,为空则不用);直到栈为空则停止。

image.png

代码如下:

function preOrderByStack(root) {
    let res = new Array();
    if (root == null) // 边界判断
        return res;
    let stack = new Array();
    stack.push(root); // 先把根节点压栈
    while (stack.length > 0) {
        root = stack.pop(); // 弹出当前栈顶元素
        res.push(root.val); // 保存结果
        if (root.right != null) {
            stack.push(root.right); // 先压入右节点
        }
        if (root.left != null) {
            stack.push(root.left); // 再压入左节点
        }
    }
    return res;
}

上面的代码复用了root变量,好处就是不使用额外的变量,降低空间复杂度。

后序遍历

后序遍历有一种非常trick的做法。我们知道先序遍历为中左右,而后序遍历为左右中,我们把后序遍历反过来,就是中右左,是不是发现和先序遍历有点像了?我们先序遍历采用了先压入右节点再压入左节点的方式得到了中左右的顺序,那么我们只要先压入左节点,再压入右节点,就能得到中右左的顺序,这里只要保存结果的时候从前往后插入,就变成了我们想要的后序遍历了:左右中

function preOrderByStack(root) {
    let res = new Array();
    if (root == null)
        return res;
    let stack = new Array();
    stack.push(root);
    while (stack.length > 0) {
        root = stack.pop();
        res.unshift(root.val); // 从数组头部添加结果
        if (root.left != null) {
            stack.push(root.left); // 先压入左节点
        }
        if (root.right != null) {
            stack.push(root.right); // 再压入右节点
        }
    }
    return res;
}

后序遍历可以求二叉树的深度。

中序遍历

当前节点只要有左节点,就将其左节点压栈,并且当前节点向其左节点方向移动,直到当前节点为空,说明此时位于最左下方的节点的空左节点处,那么接下来我们就需要弹栈获取栈顶,输出元素,然后移动到栈顶节点的右节点处。

image.png

代码如下:

function inOrderByStack(root) {
    let res = new Array();
    let stack = new Array();
    while (stack.length > 0 || (root != null)) {
        if (root != null) { // 当前节点非空,压栈后向左移动
            stack.push(root);
            root = root.left;
        } else { // 当前节点为空,弹栈输出后向右移动
            root = stack.pop();
            res.push(root.val);
            root = root.right;
        }
    }
    return res;
}

上面介绍的三种方法可以用于遍历,但是打印路径就不太方便。如果需要打印出二叉树的所有路径,可以使用下面的代码:

function dfsToPath(root) {
    let res = new Array();
    if(!root) return res;
    let stack = new Array();
    stack.push(root);
    while(stack.length > 0) {
        root = stack[stack.length-1]; // 获取栈顶元素但不弹出该元素
        // 存在左节点且左节点未遍历
        if(root.left && !root.isLeft) {
            root.isLeft = true; // 标记为已遍历
            stack.push(root.left);
            continue;
        }
        // 存在右节点且右节点未遍历
        if(root.right && !root.isRight) {
            root.isRight = true; // 标记为已遍历
            stack.push(root.right);
            continue;
        }
        // 遍历到叶子节点时保存当前路径
        if(!root.left && !root.right) {
            let temp = stack.map(item => item.val);
            res.push(temp);
        }
        // 弹出叶子节点或者子树都已遍历的节点
        stack.pop();
    }
    return res
}

下面还有两个递归版本,也可以参考下。

下面的代码输出结果是形如[ '1->2->4', '1->2->5', '1->3->6', '1->3->7' ]的字符串数组:

function binaryTreePathsString(root) {
  const paths = [];
  const construct_paths = (root, path) => {
    if (root) {
      path += root.val.toString();
      if (root.left === null && root.right === null) { // 当前节点是叶子节点
        paths.push(path); // 把路径加入到答案中
      } else {
        path += "->"; // 当前节点不是叶子节点,继续递归遍历
        construct_paths(root.left, path);
        construct_paths(root.right, path);
      }
    }
  }
  construct_paths(root, "");
  return paths
}

下面代码输出的结果是形如[ [ 1, 2, 4 ], [ 1, 2, 5 ], [ 1, 3, 6 ], [ 1, 3, 7 ] ]的数组:

function binaryTreePathsArray(root) {
    let paths = [];
    const resc = (root, path) => {
        if(root) {
            // path.push(root.val); 这样的写法是错误的
            // 数组是引用类型,跟上面代码的字符串是不一样的
            // 每次递归的时候都要浅拷贝一下
            path = [...path, root.val]; 
            if(root.left == null && root.right == null) {
                paths.push(path);
            } else {
                resc(root.left, path);
                resc(root.right, path);
            }
        }
    }
    resc(root, []);
    console.log(paths);
}

掌握上面的代码,下面的问题应该都能解决了:

剑指 Offer 68 - II. 二叉树的最近公共祖先
剑指 Offer 34. 二叉树中和为某一值的路径
124. 二叉树中的最大路径和

难度中等101收藏分享切换为英文接收动态反馈

层序遍历

简单来说就是一行一行地遍历,基于队列来做,先把根节点入队列,只要队列非空,每次把队头结点弹出,然后把堆头的左右节点压入队列中,这样最终遍历出来的就是层序遍历的顺序。

function levelOrder(root) {
    if (root == null)
        return null;
    let res = new Array();
    let queue = new Array();
    queue.unshift(root); // 先把根节点入队列
    while (queue.length > 0) { // 队列非空
        root = queue.pop();
        res.push(root.val); // 弹出队头节点
        if (root.left != null) queue.unshift(root.left);
        if (root.right != null) queue.unshift(root.right);
    }
    return res;
}

上面是一种比较简单的实现,只能按顺序进行遍历,例如[1, 2, 3, 4, 5, 6, 7],无法获取每一层的节点。

如果需要单独打印出每一层的节点,可以使用下面的写法:

function levelOrder(root) {
  if (root == null)
    return null;
  let res = new Array();
  let queue = new Array();
  queue.unshift(root);
  while (queue.length > 0) {
    let size = queue.length, // 队列保存了当前层的节点,获取节点个数
        temp = []; // 临时保存当前层节点的值
    for(let i=0; i<size; i++) { // for循环将当前层节点全部出队,并将下一层的节点加入队列
      root = queue.pop();
      temp.push(root.val);
      if (root.left != null) queue.unshift(root.left);
      if (root.right != null) queue.unshift(root.right);
    }
    res.push(temp);
  }
  return res
}

在上面的代码中,while每循环一次,就会遍历二叉树的一层,输出的结果为[ [ 1 ], [ 2, 3 ], [ 4, 5, 6, 7 ] ],掌握上面这个代码,下面的问题就不在话下了:

102. 二叉树的层序遍历
104. 二叉树的最大深度
111. 二叉树的最小深度
199. 二叉树的右视图
637. 二叉树的层平均值

参考:
二叉树遍历
二叉树:层序遍历登场!

查看原文

赞 0 收藏 0 评论 0

一杯绿茶 关注了专栏 · 10月9日

javascript-lNong

只此一生,何必从众

关注 1004

一杯绿茶 关注了专栏 · 10月9日

民工哥技术之路

公众号:民工哥技术之路、《Linux系统运维指南 从入门到企业实战》作者。专注系统架构、高可用、高性能、高并发,数据库、大数据、数据分析、Python技术、集群中间件、后端等开源技术分享。

关注 17229

一杯绿茶 关注了用户 · 10月9日

user_name @user__name

关注 256

一杯绿茶 关注了专栏 · 10月9日

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 41327

一杯绿茶 关注了专栏 · 10月9日

springboot 最佳实践

SpringBoot技术的势、道、术分析与实践。

关注 1260

一杯绿茶 关注了专栏 · 10月9日

code秘密花园

基础知识、算法、原理、项目、面试。公众号code秘密花园

关注 5203

一杯绿茶 关注了专栏 · 10月9日

web进阶

从前端菜鸟到全栈大牛的学习进阶之路

关注 2107

一杯绿茶 关注了专栏 · 10月9日

SegmentFault 之声

在这里,我们将为你推送 SegmentFault 思否公司官方合作信息,和合作伙伴最新动态。SegmentFault 思否是中国领先的开发者社区和技术媒体,中国最大的 Hackathon 组织者。我们致力于成为科技企业和开发者沟通的桥梁,帮助科技企业和开发者对话。

关注 10583

一杯绿茶 关注了专栏 · 10月9日

Sown

学习笔记

关注 238

一杯绿茶 关注了专栏 · 10月9日

疯狂的技术宅

本专栏文章首发于公众号:前端先锋 。

关注 24624

一杯绿茶 关注了用户 · 10月9日

Jason @jason_5f0dbb9eaae42

以终为始,闭环迭代,持续提高。

关注 2834

一杯绿茶 关注了专栏 · 10月9日

SegmentFault 行业快讯

第一时间为开发者提供行业相关的实时热点资讯

关注 27986

一杯绿茶 关注了标签 · 10月9日

关注 65931

一杯绿茶 关注了标签 · 10月9日

springboot

Spring Boot 项目旨在简化创建产品级的 Spring 应用和服务。你可通过它来选择不同的 Spring 平台。

关注 14551