前前前端小飞
前前前端小飞

从Vue2.0到React17——React开发入门

前言

找工作时发现有一些公司是以React作为技术栈的，而且薪资待遇都不错，为了增加生存的筹码，所以还是得去学一下React，增加一项求生技能。因为我用Vue2.0开发项目已经四年了，故用Vue2.0开发项目的思路来学习React。

前端项目是由一个个页面组成的，对于Vue来说，一个页面是由多个组件构成的，页面本身也是一个路由组件。对于React来说也是如此。Vue会提供一系列技术支持来完成一个组件的开发，可以从这一系列技术支持出发，去React中寻找对应的技术支持来入门React，比如React中如何开发组件的UI，React中如何使用组件，React中如何定义组件数据等等。

本专栏将按照这个思路带领你从Vue2.0入门React17。

1、脚手架

首先得选择一个脚手架搭建一个React工程，React有很多脚手架，为什么选择UmiJS这个脚手架，不为什么，这个脚手架和Vue Cli比较类似，至少路由配置和Vue Router很类似。

在学习前，先用UmiJS搭建一个React工程，步骤很简单：

  • 先找个地方建个空目录，打开命令行工具，执行命令 mkdir myapp && cd myapp；
  • 执行命令npm create @umijs/umi-app创建一个React工程；
  • 执行命令npm install安装依赖；
  • 依赖安装成功后，执行命令npm run start启动项目，在浏览器上打开 http://localhost:8000 访问项目。

可以看见myapp这个React工程的目录结构如下所示：

.
├── package.json
├── .umirc.ts
├── .env
├── dist
├── mock
├── public
└── src
    ├── .umi
    ├── layouts/index.tsx
    ├── pages
        ├── index.less
        └── index.tsx
    └── app.ts
复制代码

打开 .umirc.ts 文件，其内容如下所示

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});
复制代码

其路由是在routes选项中配置，配置和Vue Router非常相似，具体如何配置放在后面介绍路由跳转和传参中一并介绍。

接下来在src/pages/index.tsx文件中书写demo来学习React。

2、React中如何开发组件的UI

Vue和React中所开发的都是组件，其页面也是一个路由组件。在Vue中组件是定义在后缀为.vue的文件中，在React中组件是定义在后缀为.js的文件中，若使用TypeScript来开发React，则其组件是定义在后缀为.tsx的文件中。

那如何开发一个组件的UI部分，例如开发一个 HelloWorld 组件在浏览器页面上展示hello world，一个组件的UI包括HTML部分和CSS部分。

2.1 HTML部分

组件的HTML部分，Vue推荐使用template模板，React推荐使用JSX语法。

在工程的src/pages文件夹中创建一个HelloWorld.js文件，在其中开发HelloWorld组件。

此外React组件有两种定义方法，一种是函数形式，一种是ES6的class形式。

函数形式，称为函数组件：

export default function HelloWorld() {
  return (
    
hello world

  );
}
复制代码

ES6的class形式，称为类组件：

import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      
hello world

    );
  }
}
复制代码

这里要注意函数名的首字母要大写。在函数中的return后面用JSX语法来开发组件的UI部分。

另外还要注意在return后面的内容最外面要用()括起来，否则在return同一行后面最少跟一个<才可以，如下所示：

export default function HelloWorld() {
  return <
    div>hello world
} 复制代码

这样看起来是不是怪怪的，所以最好加个()。

2.2 绑定 Class 和 Style

关于组件的CSS部分，其最重要的是绑定 Class 和 Style，才能给组件的HTML添加样式。

先来看一下 Class 与 Style 是固定不变，React 中是怎么绑定的。

export default function HelloWorld() {
  return (
    

      hello world
    

  );
}
复制代码

React中是用className来绑定 Class，用style来绑定 Style。其中style接受的值是一个对象，且用{}中括号传入，而且对象的属性名只能用驼峰式 (camelCase) 来命名。

在来看一下 Class 与 Style 是变量，在React中是怎么绑定的。

  • 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      styleData: { color: 'red', 'fontSize': "16px" },
      isHead: true,
      className: 'title'
    };
  }

  render() {
    return (
      

        hello world
      

    );
  }
}
复制代码
  • 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld() {
  const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
  const [isHead] = useState(true);
  const [className] = useState('title');
  return (
    

      hello world
    

  );
}
复制代码

在React中是使用{}给属性赋值变量，且className只接受字符串，不接受数组或者对象，可以用ES6的模板字符串功能来拼接变量生成字符串。

在函数组件的写法中用useState这个React Hook定义了一些变量，useState的作用放在后面介绍。

3、React中如何使用组件

HelloWorld 组件写好了，要如何使用呢？先回顾一下在Vue中是如何使用组件的，在使用组件前要先注册，可以注册为全局组件或局部组件。

在React中是没有注册组件的概念，因为组件相当一个函数，只有引入组件的概念，也没有全局组件的概念。使用组件前必须用import先把组件引入并命名。

import HelloWorld from './HelloWorld.js'

export default function Index(){
  return (
    
  )
}
复制代码

在React中组件的命名必须以大写字母开头，因为 React 会将以小写字母开头的组件视为原生 DOM 标签。

4、React中如何定义组件数据

从开发Vue组件的经验来说，一个组件的数据，可以分为内部数据和参数数据两种。对于React也是如此，在React中把内部数据称为state，把参数数据称为props。

4.1 定义内部数据state

在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了styleData、isHead、className这些内部数据。

  • 在类组件中是在this.state这个对象中定义数据：
this.state = {
  styleData: { color: 'red', 'fontSize': "16px" },
  isHead: true,
  className: 'title'
};
复制代码
  • 在函数组件的写法中使用useState这个React Hook定义了数据：
const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
const [isHead] = useState(true);
const [className] = useState('title');
复制代码

个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的this指向问题，从而来降低入门难度。

关于的React Hook 可以看这里 。

4.2 定义参数数据props

props用来接收外部传递给组件的数据。例如在 HelloWorld 组件中定义title一个参数数据。

  • 类组件的写法：
import React from 'react';
class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      
{this.props.title}

    );
  }
}
HelloWorld.defaultProps = {
  title: 'hello world'
};
export default HelloWorld;
复制代码

在类组件中的构造函数constructor接受props作为传入组件的参数数据集合，并调用super(props)把props传给React.Component构造函数，这样类组件才能接受参数数据集合props，再用this.props.title来读取title参数数据的值，另外可以用defaultProps来定义title参数数据的默认值。

  • 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld(props) {
  const {title = 'hello world'} = props;
  return (
    
{title}

  );
}
复制代码

函数组件接收一个props作为传入组件参数数据的集合，利用 ES6 解构赋值的功能，来获取组件的参数数据，并可以给参数数据设置默认值。

这里要注意了，在Vue的template模板中是用{{}}（双大括号）来使用数据的，而在React中是统一用{}（单大括号）来使用数据的。

参数数据Props是用接收外部传递给组件的数据，那React中如何向组件传递数据呢？

5、React中如何向组件传递数据

在Vue中规定了动态数据和字符串、数字、布尔值、数组、对象类型的静态数据如何传递给组件，我们一一对应去寻找React中如何传递。

  • 传递动态数据
import { useState } from 'react';
import HelloWorld from './HelloWorld.js';
export default function Index(){
  const [styleData] = useState({ color: 'red', 'fontSize': "16px" });
  const [isHead] = useState(true);
  const [className] = useState('title');
  return (
    
  )
}
复制代码
  • 传递字符串类型的静态数据

复制代码
  • 传递数字类型的静态数据

复制代码
  • 传递布尔值类型的静态数据

复制代码
  • 传递数组类型的静态数据

复制代码
  • 传递对象类型的静态数据

复制代码

可见在React中，除了传递字符串类型的静态数据，都要用{}包裹数据再赋值给组件标签上的属性来传递数据给组件。

6、React中如何监听DOM事件

6.1 监听DOM元素的DOM事件

  • 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('点击事件');
  }

  render() {
    return (
      
hello world

    );
  }
}
复制代码
  • 函数组件的写法：
export default function HelloWorld() {
  const handleClick = ()=>{
     console.log('点击事件');
  }
  return (
    
hello world

  );
}
复制代码

React中用onClick来监听点击事件，用{}包裹点击事件触发时执行的函数，再赋值给onClick。

其中onClick是一个合成事件，在Vue中@后面跟着是DOM的原生事件，而React中on后面跟着并不是DOM的原生事件。例如Vue中监听双击事件 @dblclick，而React中监听双击事件 onDoubleClick。

React中的合成事件具体可以看这里。

6.2 监听React组件的DOM事件

在Vue中用.native修饰符来监听组件上的DOM事件，而在React中监听组件上的DOM事件要这样实现。

例如在组件上监听click事件，先要把click事件触发时要执行的函数当作Props给组件传递进去，在组件的根元素上监听click事件，click事件触发时执行该Props，这样来间接监听组件上的click事件。具体实现如下所示：

  • 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props:any) {
    super(props);
    console.log(this.props)
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.onClick();
  }

  render() {
    return (
      
hello world

    );
  }
}
复制代码

import React from 'react';
import HelloWorld from './HelloWorld';
export default class Grandfather extends React.Component {
  handleClick() {
    console.log('点击事件');
  }
  render() {
    return (
       { this.handleClick() }}>
      
    )
  }
}
复制代码
  • 函数组件的写法：
export default function HelloWorld(props) {
  const { onClick } = props
  const handleClick = () => {
    onClick();
  }
  return (
    
hello world

  );
}
复制代码

import HelloWorld from './HelloWorld';
export default function Index(){
  const handleClick = ()=>{
    console.log('点击事件');
  }
  return (
     { handleClick() }}>
    
  )
}
复制代码

7、React中组件如何改变数据

上面介绍了，React组件的数据分为内部数据state和参数数据props，对应的改变方法也不一样。

7.1 改变内部数据state

比如要改变组件中定义的内部数据title。

  • 类组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: 'hello world',
      className: 'title'
    };
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      title: 'hello react',
      className: 'title active'
    }));
  }

  render() {
    return (
      
{title}

    );
  }
}
复制代码

在this.setState()中可以传递一个函数或一个对象，建议传递一个函数(state,props) =>{}，函数可以接受内部数据state和参数数据props作为参数，而且state和props只读无法修改，每次调用this.setState时读取到的state和Props都是最新，特别适用多次调用this.setState修改同一个state的场景。最后函数放回一个对象，对象的内容为要修改的state。

  • 函数组件的写法：
import { useState } from 'react';
export default function HelloWorld() {
  const [title,setTitle] = useState('hello world');
  const [className,setClassName] = useState('title');
  const handleClick = () =>{
    setTitle('hello react');
    setClassName('title active')
  }
  return (
    

      {title}
    

  );
}
复制代码

在React中称内部数据为state，使用useState(param)定义一个state时，可以通过参数param设置state的默认值，其返回一个数组，数组的第一个值是state，数组的第二个值是改变state的函数，可以调用该函数来改变state。

另外用useState定义的数据是响应式的，若页面有使用该数据，该数据改变后页面会重新渲染。

7.2 改变参数数据props

跟Vue一样，在组件中是不能直接改变props，假如要改变props，只能通过在父组件中改变传递给子组件的数据来间接改变props，那在子组件中怎么让父组件改变传递给子组件的数据呢，将在React中父子组件如何通讯介绍。

8、React中父子组件如何通讯

用一个例子来介绍，假如 HelloWorld 组件的 “hello world” 是用参数数据props中的title展示，点击组件中的改变标题按钮时变成 “hello React” 。

  • 类组件的写法：
import React from 'react';
class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.handleChangeTitle=this.handleChangeTitle.bind(this);
  }
  handleChangeTitle(){
    this.props.changeTitle('hello React');
  }
  render() {
    return (
      

        {this.props.title}
        
      

    );
  }
}
HelloWorld.defaultProps = {
  title: 'hello world'
};
export default HelloWorld;
复制代码

import HelloWorld from './HelloWorld.js'
import React from 'react'
class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      info:'hello world'
    };
    this.handleChangeTitle=this.handleChangeTitle.bind(this);
  }
  handleChangeTitle(data){
    this.setState(state =>{
      return {
        info:data
      }
    })
  }
  render() {
    return (
      
      
    );
  }
}
export default Index;
复制代码
  • 函数组件的写法：
export default function HelloWorld(props: any) {
  const { title = 'hello world', changeTitle } = props;
  const handleChangeTitle = () => {
    changeTitle('hello React')
  }
  return (
    

      {title}
      
    

  );
}
复制代码

import { useState } from 'react'
import HelloWorld from './HelloWorld.js'

export default function Index(){
  const [info,setInfo] = useState('hello world');
  const handleChangeTitle = (data)=>{
    setInfo(data);
  }
  return (
    
  )
}
复制代码

在父组件中定义一个info数据传递给子组件的title参数数据，同时也定义了一个回调函数handleChangeTitle来改变info数据，并把回调函数也传递给子组件的changeTitle参数数据。

这样子组件的changeTitle参数数据可以作为一个函数来调用，调用changeTitle时相当调用handleChangeTitle回调函数，可以把要改变的值通过data函数参数传递出来，再执行setInfo(data)改变info数据，再传递给子组件的title参数数据，间接改变了title参数数据，实现了React中组件如何改变参数数据。

在父组件中也可以调用setInfo改变传递给子组件的title参数数据的info数据，以上就是React中父子组件通讯的一个方法。

9、React中如何监听组件数据的变化

在Vue中可以用简单地用watch来监听数据的变化，而在React中比较复杂，子组件的类型不同实现方法也不同。

  • 类组件的写法：

在类组件中用componentDidUpdate这个生命周期方法来实现，该方法首次渲染时componentDidUpdate不会执行，在后续props和state改变时会触发componentDidUpdate，其接受的第一个参数prevProps代表改变前的props，第二参数prevState代表改变前的state。

componentDidUpdate(prevProps, prevState){
  if(prevProps.title !== this.props.title){
     console.log('props中的title数据改变了');
  }
  if(prevState.info !== this.state.info){
     console.log('state中的info数据改变了');
  }
}
复制代码
  • 函数组件的写法

在函数组件中，可以useEffect这个React Hook监听数据的变化，但是无法像Vue的watch能够获取改变前的旧数据。所以要自定义一个Hook来实现类似Vue的watch的功能。自定义Hook是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。故把这个自定义Hook称为useWatch。

如何获取改变前的旧数据，可以在第一次数据改变时触发useWatch时用一个容器把旧数据存储起来，下次再触发useWatch时通过读取容器中的值就可以获取改变前的旧数据。容器可以用useRef这个 Hook 来创建。

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
  const oldValue = useRef();
  useEffect(() =>{
    callback(value,oldValue.current);
    oldValue.current=value;
  },[value])
}
复制代码

但是useEffect会在组件初次渲染后就会调用一次，导致callback回调函数会被执行一次，另外在Vue的watch是用immediate配置来控制在组件初次渲染后马上执行callback回调函数，且默认不会在组件初次渲染后执行callback回调函数，接着在hook.js中定义一个useWatch。

首先实现一下组件初次渲染不执行callback回调函数。

import {useEffect,useRef} from 'react';
export function useWatch(value,callback){
  const oldValue = useRef();
  const isInit = useRef(false);
  useEffect(() =>{
    if(!isInit.current){
      isInit.current = true;
    }else{
      callback(value,oldValue.current);
    }
    oldValue.current=value;
  },[value])
}
复制代码

再添加immediate配置来控制在组件初次渲染后是否马上执行callback回调函数。

import {useEffect,useRef} from 'react';
export function useWatch(value,callback,config={immediate: false}){
  const oldValue = useRef();
  const isInit = useRef(false);
  useEffect(() =>{
    if(!isInit.current){
      isInit.current = true;
      if(config.immediate){
        callback(value,oldValue.current);
      }
    }else{
      callback(value,oldValue.current);
    }
    oldValue.current=value;
  },[value])
}
复制代码

另外Vue的watch还返回一个unwatch函数，调用unwatch函数可以停止监听该数据。

import { useEffect, useRef } from 'react';
export function useWatch(value, callback, config = { immediate: false }) {
  const oldValue = useRef();
  const isInit = useRef(false);
  const isWatch = useRef(true);
  useEffect(() => {
    if (isWatch.current) {
      if (!isInit.current) {
        isInit.current = true;
        if (config.immediate) {
          callback(value, oldValue.current);
        }
      } else {
        callback(value, oldValue.current);
      }
      oldValue.current = value;
    }
  }, [value])

  const unwatch =  () => {
    isWatch.current = false;
  };
  return unwatch;
}
复制代码

useWatch 这个Hook 定义好后，这么使用。

export {useState} from 'react';
export {useWatch} from './hook.js';
export default function HelloWorld() {
  const [title,setTitle] = useState('hello world')
  useWatch(title, (value, oldValue) => {
    console.log(value);
    console.log(oldValue)
  })
  const handleChangeTitle = () => {
    setTitle('hello React')
  }
  return (
    
{title}

  );
}
复制代码

10、React中父组件如何调用子组件的方法

在Vue中是使用ref给子组件赋予一个标识 ID ，再使用this.$refs[ID]访问到这个子组件的实例对象，然后通过实例对象去调用子组件的方法。而在React中比较复杂，子组件的类型不同实现方法也不同。

  • 类子组件的写法：
import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title:'hello World'
    };
  }
  handleChangeTitle(){
    this.setState({
      title:'hello React'
    });
  }
  render() {
    return (
      

        {this.state.title}
      

    );
  }
}
复制代码

import React from 'react';
import HelloWorld from './HelloWorld.js';

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.myCom = React.createRef();
    this.changeTitle = this.changeTitle.bind(this);
  }
  changeTitle() {
    this.myCom.current.handleChangeTitle();
  }
  render() {
    return (
      

        
        
      

    )
  }
}
export default Index;
复制代码
  • 函数组件的写法：

useRef()无法使用在函数组件上使用，在函数组件中要先使用 useImperativeHandle 定义要暴露给父组件的实例值，另外要把函数组件传入forwardRef处理后再导出。

import { useState, forwardRef, useImperativeHandle } from 'react';

const HelloWorld = (props, ref) => {
  const [title, setTitle] = useState('hello World');
  useImperativeHandle(ref, () => ({
    handleChangeTitle: () => {
      setTitle('hello React')
    },
  }));
  return (
    
{title}

  );
}
export default forwardRef(HelloWorld)
复制代码

import { useRef } from 'react'
import HelloWorld from './HelloWorld.js'

export default function Index() {
  const myCom = useRef();
  const changeTitle = () => {
    myCom.current.handleChangeTitle();
  }
  return (
    

      
      
    

  )
}
复制代码

11、React中组件插槽怎么实现

11.1 普通插槽

其实React中是没有插槽的概念，不过可以用props.children来实现插槽的功能。

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，也可以用插槽的形式来实现，通过props.children把 “ hello World ” 从父组件传递进去。

类组件的写法：

import React from 'react';
export default class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        {this.props.children}
      

    );
  }
}
复制代码

import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
  constructor(props) {
    super(props);
  }
  render() {
    return (
      hello World
    )
  }
}
export default Index;
复制代码

函数组件的写法：

export default function HelloWorld(props){
  const {children}=props;
  return (
    

      {children}
    

  );
}
复制代码

import HelloWorld from './HelloWorld.js';
export default function Index(){
  return (
    hello World
  )
}
复制代码

11.2 具名插槽

可以通过props给子组件传递一个函数，如果这个函数最后返回React元素，其React元素是用JSX语法编写的，这样就间接实现具名插槽的功能。

例如开发一个 HelloWorld 组件用来展示 “ hello World ” ，用具名插槽的形式来实现。

类组件的写法：

import React from 'react';
class HelloWorld extends React.Component{
  constructor(props){
    super(props)
    this.elementSlot = "";
    if (this.props.element) {
      this.elementSlot = this.props.element();
    }
  }
  render(){
    return (
      

        {this.elementSlot}
      

    );
  }
}
export default HelloWorld;
复制代码

import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
  constructor(props) {
    super(props);
  }
  info(){
    return(
      hello World
    )
  }
  render() {
    return (
      
    )
  }
}
export default Index;
复制代码

函数组件的写法：

export default function HelloWorld(props) {
  const { children, element } = props;
  let elementSlot = "";
  if (element) {
    elementSlot = element();
  }
  return (
    

      {elementSlot}
    

  );
}
复制代码

import HelloWorld from './HelloWorld.js';

export default function Index(){
  const info = () =>{
    return (
      hello World
    )
  }
  return (
    
  )
}
复制代码

11.3 作用域插槽

Vue的作用域插槽的作用是用子组件中的数据在父组件中写插槽内容。

回顾上面具名插槽的实现过程，先在父组件中定义一个函数，该函数能返回一个React元素，再通过props把该函数传递给子组件，在子组件中执行该函数，把执行结果添加到子组件的React元素中。

如果在子组件中执行该函数时，把子组件的数据当作参数传递进去，那么在父组件中就可以用该函数接收子组件的数据来写React元素（插槽的内容）。这样就实现了作用域插槽。

例如开发一个 HelloWorld 组件用来展示 “ 用子组件的数据写具名插槽 hello World ” ，用作用域插槽的形式来实现。

类组件的写法：

import React from 'react';
class HelloWorld extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      info:'用子组件的数据写具名插槽 hello World'
    }
    this.elementSlot = "";
    if (this.props.element) {
      this.elementSlot = this.props.element(this.state.info);
    }
  }
  render(){
    return (
      

        {this.elementSlot}
      

    );
  }
}
export default HelloWorld;
复制代码

import React from 'react';
import HelloWorld from './HelloWorld.js';
class Index extends React.Component{
  constructor(props) {
    super(props);
  }
  info(data){
    return(
      {data}
    )
  }
  render() {
    return (
      
      
    )
  }
}
export default Index;
复制代码

函数组件的写法

import { useState } from "react";

export default function HelloWorld(props) {
  const { children, element } = props;
  const [info] = useState('用子组件的数据写具名插槽 hello World')
  let elementSlot = "";
  if (element) {
    elementSlot = element(info);
  }
  return (
    

      {elementSlot}
      {children}
    

  );
}
复制代码

import HelloWorld from './HelloWorld.js';

export default function Index(){
  const info = (data) =>{
    return (
      {data}
    )
  }
  return (
    
  )
}
复制代码

小结

以上从Vue开发一个组件会用到的技术，在React中寻找对应的实现方案的角度来入门React，读完你应该会用React开发一些简单的页面，并能把页面分割成一个个组件，并在组件之间进行数据交互。下一篇文章将介绍开发组件时在Vue中那些常用的指令在React中是如何实现的。

作者：红尘炼心
链接：https://juejin.cn/post/6975864046058733576

你可能感兴趣的:(从Vue2.0到React17——React开发入门)

  • 第二篇：多模态技术突破——DeepSeek如何重构AI的感知与认知边界 python算法(魔法师版) 动态规划
    ——从跨模态对齐到因果推理的工程化实践在AI技术从单一模态向多模态跃迁的关键阶段，DeepSeek通过自研的多模态融合框架，在视觉-语言-语音的联合理解与生成领域实现系统性突破。本文将从技术实现层面，解构其跨模态表征学习、动态融合机制与因果推理能力的内在创新。1.跨模态对齐革命：时空一致性建模传统多模态模型常面临模态割裂问题，DeepSeek提出「时空同步对比学习」（ST-CL）框架：视觉-语言对
  • 蓝桥杯备考：前缀和算法---模板题 无敌大饺子 1 蓝桥杯职场和发展
    【模板】前缀和这道题，如果我们简单的用暴力解法，时间复杂度就是O（q*N）也就是10的十次方，这时候我们就会超时我们要学习一种前缀和的算法，它能帮助我们做一些预处理，用空间复杂度代替时间复杂度，比如说这道题，我们开辟一个数组，f[N]，我们只需要一个公式f[i]=f[i-1]+a[i]就能完成我们的预处理，最后查询的时间复杂度就是O（1）了，比如我们要查询l到r的和，我们就让f[r]-f[l-1]
  • 深度学习查漏补缺：1.梯度消失、梯度爆炸和残差块 nnerddboy 白话机器学习深度学习人工智能
    一、梯度消失梯度消失的根本原因在于激活函数的性质和链式法则的计算：激活函数的导数很小：常见的激活函数（例如Sigmoid和Tanh）在输入较大或较小时，输出趋于饱和（Sigmoid的输出趋于0或1），其导数接近于0。在反向传播中，每一层的梯度都会乘以激活函数的导数。如果导数很小，乘积就会导致梯度逐渐变小。链式法则的多次相乘：假设网络有nn层，梯度从输出层传到第ii层时，会经历多次链式相乘：如果每一
  • （尚硅谷 Java 学习 B 站大学版）Day 13 面向对象 方法 亢从文_Jackson java学习开发语言
    4-5类的成员之二：方法（Method）一、“万事万物皆对象”**：（理解）1、在Java语言范畴中，我们都将功能、结构等封装到类中，通过类的实例化，来调用具体的功能结构>Scanner,String等>文件：File>网络资源：URL2、涉及到java语言与前端html、后端数据库交互时，前后端的结构在Java层面交互时，都体现为类、对象二、内存解析说明1、引用类型的变量，只可能存储两类值：nu
  • uni-popup从底部弹出时，取消底部安全区域（小程序） ikun_isme 前端javascript开发语言
    标题内容区域关闭import{ref}from'vue'constpopup=ref(null)constshowPopup=()=>{popup.value.open()}constclosePopup=()=>{popup.value.close()}.popup-content{min-height:200px;padding:15px;}/*取消底部安全区域*/:deep(.uni-pop
  • 如何进行架构管控 snaildani 架构
    架构管控技术管理者如何进行架构管控技术管理者如何进行架构管控为什么要做架构管控tbd保证设计的延续性tbd及时掌握架构变更信息tbd如何开展架构管控使用C4架构图保证架构设计的一致性一、C4架构图C4架构图是近年兴起的一种架构图，用来弥合从传统瀑布开发模式转到敏捷开发模式的实践中，设计文档可能缺失的问题。具体而言，在瀑布开发模式中，详细设计文档是事无巨细的，要么耗费大量的时间和精力（并且在开发过程
  • 构建一个研发助手Agent：提升开发效率的实践 人工智能机器学习
    在上一篇文章中,我们讨论了如何构建一个文档助手Agent。今天,我想分享另一个实际项目:如何构建一个研发助手Agent。这个项目源于我们团队的真实需求-提升研发效率,降低开发成本。从开发痛点说起记得和研发团队讨论时的场景：小张：每天要写很多重复的代码,很浪费时间小李：是啊,而且经常要查API文档,切换上下文很烦我：主要是哪些开发场景？小张：CRUD、单元测试、接口对接这些我：这些场景很适合用AIA
  • 从System Prompt来看Claude3、Kimi和ChatGLM4之间的差距 herosunly 大模型systempromptgpt4claudekimiChatGLM4
      大家好，我是herosunly。985院校硕士毕业，现担任算法t研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法行业就业。希望和大家一起成长进步。  本文主要介绍了从SystemPrompt来看Claude3、Kimi和ChatGLM
  • day15【LeetCode力扣】707.设计链表 Gcanfly leetcode链表算法
    day15【LeetCode力扣】707.设计链表1.题目描述你可以选择使用单链表或者双链表，设计并实现自己的链表。单链表中的节点应该具备两个属性：val和next。val是当前节点的值，next是指向下一个节点的指针/引用。如果是双向链表，则还需要属性prev以指示链表中的上一个节点。假设链表中的所有节点下标从0开始。实现MyLinkedList类：MyLinkedList()初始化MyLink
  • python 去掉字符串的 " aini4568 python
    list_name=["hello","岚","许言午","公司","赵六","wangwu","太司","许春林","测试","zhangsan"]#第一种方法：我们在views中使用replaceprintlist_name.replace('\"','')#第二种方式把变量list_name传递到前台，在前台的页面处理varlist_name=$('#list_name').val().re
  • 换硬币,人民币等多种思路方法(以谁作为输出结果的排列依据就以谁作为外层for) Q1684964515 算法c++开发语言
    将一笔零钱换成5分、2分和1分的硬币，要求每种硬币至少有一枚，有几种不同的换法？输入格式:输入在一行中给出待换的零钱数额x∈(8,100)。输出格式:要求按5分、2分和1分硬币的数量依次从大到小的顺序，输出各种换法。每行输出一种换法，格式为：“fen5:5分硬币数量,fen2:2分硬币数量,fen1:1分硬币数量,total:硬币总数量”。最后一行输出“count=换法个数”。输入样例:13fen
  • Pyhon : 爬虫Requests高级用法--超时（timeout） ZhuCheng Xie Python
    超时（timeout）为防止服务器不能及时响应，大部分发至外部服务器的请求都应该带着timeout参数。在默认情况下，除非显式指定了timeout值，requests是不会自动进行超时处理的。如果没有timeout，你的代码可能会挂起若干分钟甚至更长时间。连接超时指的是在你的客户端实现到远端机器端口的连接时（对应的是connect()_），Request会等待的秒数。一个很好的实践方法是把连接超时
  • 计算机视觉：解锁智能时代的钥匙与实战案例 我的运维人生 计算机视觉人工智能运维开发技术共享
    计算机视觉：解锁智能时代的钥匙与实战案例在人工智能的浩瀚星空中，计算机视觉无疑是最为璀璨的星辰之一。它不仅让机器拥有了“看”的能力，更是推动了自动驾驶、安防监控、医疗影像分析、智能制造等多个领域的革新。本文将深入探讨计算机视觉的核心技术、最新进展，并通过一个具体的代码案例，展示如何在实际项目中应用这些技术。一、计算机视觉概述计算机视觉，简而言之，是指让计算机系统从数字图像或视频中提取有用信息的过程
  • solr 的admin.html 详细使用讲解 qq_37300675 solr
    爱雨轩真正的爱情，就像花朵，开放的地方越贫瘠，越是美丽动人！目录视图摘要视图订阅征文|从高考，到程序员深度学习与TensorFlow入门一课搞定！每周荐书|Web扫描、HTML5、Python（评论送书）solr管理界面详解标签：solrsolr管理界面solrqueryanalysis2016-08-0210:425117人阅读评论(0)收藏举报本文章已收录于：分类：Solr（8）作者同类文章X
  • 构建基于 Pygame 的高级流体仿真系统 机器懒得学习 pygamepython
    流体仿真在计算机图形学、游戏开发和科学计算中扮演着重要角色。通过模拟流体的运动、扩散和相互作用，我们可以创建逼真的视觉效果，甚至用于研究真实世界的物理现象。本文将深入探讨如何利用Python的Pygame和NumPy库，构建一个高效、交互性强的高级流体仿真系统。我们将从物理模型、算法实现到代码优化，逐步解析这一系统的技术细节。系统概述本流体仿真系统是一个基于Pygame的实时交互式仿真工具，支持多
  • 【码道初阶】挑战Leetcode76Hard最小覆盖子串问题：滑动窗口的优雅实现与深度剖析 月明长歌 码道初阶算法leetcodec++c语言
    最小覆盖子串问题：滑动窗口的优雅实现与深度剖析一、问题核心与挑战给定两个字符串s和t，要求从s中找到包含t所有字符（包括重复字符）的最短连续子串。若不存在，返回空字符串。例如：s="ADOBECODEBANC",t="ABC"→输出"BANC"（最小窗口）s="a",t="aa"→输出""（无法满足重复需求）挑战：如何高效地在一次遍历中找到最短覆盖子串？二、代码实现与注释以下代码通过滑动窗口算法实
  • Web 开发入门：从前端到后端的全栈开发探索 HelloZheQ 前端
    Web开发是指创建和维护通过网络浏览器访问的应用程序。Web开发涉及到的领域非常广泛，涵盖了前端、后端、数据库等多个技术栈。在这篇文章中，我们将详细介绍Web开发的基本概念、前端和后端的技术、全栈开发的特点以及如何开始从事Web开发。1.Web开发简介Web开发是构建和维护网站或Web应用程序的过程，分为前端开发、后端开发和全栈开发。前端开发负责用户界面和交互体验，后端开发负责服务器端的逻辑处理、
  • Elasticsearch与数据库数据一致性：最佳实践与解决方案 HelloZheQ elasticsearch数据库jenkins
    在现代应用程序中，Elasticsearch（ES）作为一个高效的分布式搜索引擎，常常与数据库一同使用，以提供强大的搜索、分析和数据可视化功能。然而，数据库和Elasticsearch之间的同步与一致性常常成为一个挑战。如何确保在数据库中进行的每一次操作（如插入、更新和删除）都能正确地反映到Elasticsearch中？如何处理两者之间的数据一致性问题？本文将介绍如何保持Elasticsearch
  • 人工智能导论--第1章-知识点与学习笔记 想拿高薪的韭菜 人工智能学习笔记
    请根据教材内容，完成进行下面的作业任务。必须包含有教材的具体内容，不能是生成式AI系统的生成内容。参考教材1.1节的内容介绍，谈谈你对“智能”的认识。思维能力是智能的重要特征之一，结合教材1.1.2节内容，从思维的定义、分类及其特点等角度，阐述思维的含义。参考教材1.1.3节的内容介绍，名词解析“人工智能”。参考教材1.2节的内容介绍，介绍人工智能的发展简史。参考教材1.3节的内容介绍，人工智能作
  • read+write实现:链表放到文件+文件数据放到链表 的功能 孩之 链表数据结构算法
    思路一、定义链表：1节点结构（数据int型）2链表操作（创建节点、插入节点、释放链表、打印链表）。二、链表保存到文件1打开文件2遍历链表、写文件：遍历链表,write()将节点数据写入文件。3关闭文件三、从文件加载数据到链表1打开文件2读文件、建链表：read()从文件读取数据，创建节点(放数据)。接起来，建链表。3关闭文件代码：//定义节点结构typedefstructNode{intdata;
  • 高效构建仓库AGV管理系统：基于Python的路径规划与货架管理 机器懒得学习 python开发语言数据分析路径规划AGV
    在现代化仓储中，高效管理自动引导车辆（AGV）是提升生产力和管理效率的关键。作为一种智能仓储设备，AGV可以自主完成物料的搬运，但如何实现AGV的路径规划和货架管理？本篇博客将通过一个Python项目，带你深度了解如何实现一个具备路径规划与货架管理功能的仓库管理系统（WMS）。在此过程中，你将学习到AGV的路径规划、图像可视化、节拍管理等核心技术。无论你是对物流技术感兴趣，还是对Python项目管
  • 一文读懂：国内外 AI 产品的那些事儿 再见孙悟空_ 【2025探索AI学习宇宙】人工智能chatgptAI产品AI集成AI
    国内外AI产品超全解析一、为什么AI产品这么火？在过去几年，AI产品的热度一路飙升，这很大程度上要归功于ChatGPT掀起的热潮。ChatGPT就像是一颗投入平静湖面的巨石，激起了千层浪，让AI技术走进了大众视野。它能和人自然对话，不管是帮你写论文、生成代码，还是解答生活里的各种疑惑，都不在话下，这让大家第一次真切感受到AI的强大和神奇。从企业角度来看，AI产品简直是节省时间和成本的利器。比如一家
  • React：封装高阶路由组件，根据有无token控制路由跳转 听海边涛声 react.js前端前端框架
    有些页面内的内容比较敏感，如果用户没有经过登录获取到token，是不允许跳转的。实现方案：封装一个高阶组件，根据token的有无进行路由跳转控制：
  • react18高阶组件 我谈山美，我说你媚 前端javascriptreactjs
    高阶组件的本质上就是函数，接受一个组件作为参数，然后返回一个组件。解决了组件之间如何横向抽离公共逻辑的问题。类组件之间常使用，函数组件中也可以使用，但更多的时候使用自定义hooks。高阶组件命名一般采用with开头，它可以将普通组件内部的公用功能抽离出来，复用在其被调用的组件上。举个例子，需求：每个组件渲染销毁的时候打印日志importReact,{useEffect}from'react';//
  • react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件) 不能懒鸭 react基础面试react.jsjavascript前端
    怎么理解“在react中，一切皆为组件”句话react采用组件化的思想，最小的组件单位就是原生HTML元素，采用JSX语法组件声明调用react的虚拟dom，就是一个大的组件树，从父组件层到子组件，在react-routerv4版开始，路由本身也是组件各个库提供的hoc返回也是组件，如withRouter、connectreact中的基础数据stateprops的传递也是以组件为基础1.什么是组件
  • React 高阶组件（HOC） web Rookie Reactreact.jsjavascript前端
    文章目录一.高阶组件（HOC）的定义二.HOC的作用和优势三.HOC的使用方式四.HOC的注意事项和潜在问题五.应用场景1.权限控制与认证2.数据获取与预加载3.样式和主题管理4.性能优化-缓存数据或组件渲染结果5.日志记录与调试辅助六.总结一.高阶组件（HOC）的定义高阶组件（Higher-OrderComponent，简称HOC）是一种在React中用于复用组件逻辑的高级技术。它本质上是一个函
  • 【教程4＞第5章＞第22节】基于FPGA的Gardner环实现——时偏误差检测模块 fpga和matlab #fpga开发Gardner环时偏误差检测教程4
    欢迎订阅FPGA/MATLAB/Simulink系列教程《★教程1:matlab入门100例》《★教程2:fpga入门100例》《★教程3:simulink入门60例》《★教程4:FPGA/MATLAB/Simulink联合开发入门与进阶X例》目录1.软件版本2.时偏误差检测模块的FPGA实现2.1原理回顾2.2verilog程序3.时偏误差检测模块的仿真测试
  • 腾讯笔试真题--二进制字符串（leetcode--930） Mr_Ystreet leetcodeleetcode编程笔试腾讯笔试
    腾讯笔试真题二进制字符串一个字符串如果只包含字符’0’或者’1’，那么就称这个字符串为二进制字符串。一个字符串w的子串v是一个非空的字符串，并且它由从w的某个位置开始的一段连续的字符构成。比如字符串"010"有6个子串，“0”,“1”,“0”,“01”,“10”,“010”。如果两个子串出现的位置不相同，那么就考虑这两个子串是不同的。因此，如果某个子串在不同的位置出现了很多次，那么它们都是不相同的
  • 统计用户输入的数字（0到9）出现的次数，并输出每个数字出现的次数（超详细解析） 人机yu 算法数据结构学习方法笔记
    1.头文件#include#include：这行代码引入了标准输入输出库stdio.h，该库提供了输入输出函数，比如scanf()和printf()。2.主函数声明intmain()intmain()：这是C语言程序的入口函数，程序从这里开始执行。3.变量声明intx;intcount[10];inti;intx;：声明了一个整数变量x，用来存储用户输入的数字。intcount[10];：声明了一
  • matlab快速入门（2）-- 数据处理与可视化 kyle~ matlabmatlab人工智能算法
    MATLAB的数据处理1.数据导入与导出(1)从文件读取数据Excel文件：data=readtable('data.xlsx');%读取为表格（Table）CSV文件：data=readtable('data.csv');%自动处理表头和分隔符文本文件：data=load('data.txt');%数值数据直接加载为矩阵(2)导出数据到文件保存为Excel：writetable(data,'ou
  • PHP如何实现二维数组排序？ IT独行者 二维数组PHP排序　
    二维数组在PHP开发中经常遇到，但是他的排序就不如一维数组那样用内置函数来的方便了，（一维数组排序可以参考本站另一篇文章【PHP中数组排序函数详解汇总】）。二维数组的排序需要我们自己写函数处理了，这里UncleToo给大家分享一个PHP二维数组排序的函数： 代码： functionarray_sort($arr,$keys,$type='asc'){ $keysvalue= $new_arr
  • 【Hadoop十七】HDFS HA配置 bit1129 hadoop
    基于Zookeeper的HDFS HA配置主要涉及两个文件,core-site和hdfs-site.xml。   测试环境有三台 hadoop.master hadoop.slave1 hadoop.slave2   hadoop.master包含的组件NameNode, JournalNode, Zookeeper，DFSZKFailoverController
  • 由wsdl生成的java vo类不适合做普通java vo darrenzhu VOwsdlwebservicerpc
    开发java webservice项目时，如果我们通过SOAP协议来输入输出，我们会利用工具从wsdl文件生成webservice的client端类，但是这里面生成的java data model类却不适合做为项目中的普通java vo类来使用，当然有一中情况例外，如果这个自动生成的类里面的properties都是基本数据类型，就没问题，但是如果有集合类，就不行。原因如下： 1)使用了集合如Li
  • JAVA海量数据处理之二（BitMap） 周凡杨 java算法bitmapbitset数据
           路漫漫其修远兮，吾将上下而求索。想要更快，就要深入挖掘 JAVA 基础的数据结构，从来分析出所编写的 JAVA 代码为什么把内存耗尽，思考有什么办法可以节省内存呢？ 啊哈！算法。这里采用了 BitMap 思想。   首先来看一个实验： 指定 VM 参数大小： -Xms256m -Xmx540m
  • java类型与数据库类型 g21121 java
    很多时候我们用hibernate的时候往往并不是十分关心数据库类型和java类型的对应关心，因为大多数hbm文件是自动生成的，但有些时候诸如：数据库设计、没有生成工具、使用原始JDBC、使用mybatis(ibatIS)等等情况，就会手动的去对应数据库与java的数据类型关心，当然比较简单的数据类型即使配置错了也会很快发现问题，但有些数据类型却并不是十分常见，这就给程序员带来了很多麻烦。 &nb
  • Linux命令 510888780 linux命令
    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 cat /proc/cpuinfo 显示C
  • java常用JVM参数 墙头上一根草 javajvm参数
    -Xms：初始堆大小，默认为物理内存的1/64(<1GB)；默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时，JVM就会增大堆直到-Xmx的最大限制 -Xmx：最大堆大小，默认(MaxHeapFreeRatio参数可以调整)空余堆内存大于70%时，JVM会减少堆直到 -Xms的最小限制 -Xmn：新生代的内存空间大小，注意：此处的大小是（eden+ 2
  • 我的spring学习笔记9-Spring使用工厂方法实例化Bean的注意点 aijuans Spring 3
    方法一： <bean id="musicBox" class="onlyfun.caterpillar.factory.MusicBoxFactory" factory-method="createMusicBoxStatic"></bean> 方法二：
  • mysql查询性能优化之二 annan211 UNIONmysql查询优化索引优化
    1 union的限制 有时mysql无法将限制条件从外层下推到内层，这使得原本能够限制部分返回结果的条件无法应用到内层 查询的优化上。 如果希望union的各个子句能够根据limit只取部分结果集，或者希望能够先排好序在 合并结果集的话，就需要在union的各个子句中分别使用这些子句。 例如 想将两个子查询结果联合起来，然后再取前20条记录，那么mys
  • 数据的备份与恢复 百合不是茶 oraclesql数据恢复数据备份
     数据的备份与恢复的方式有: 表,方案 ,数据库;     数据的备份: 导出到的常见命令; 参数 说明 USERID 确定执行导出实用程序的用户名和口令 BUFFER 确定导出数据时所使用的缓冲区大小，其大小用字节表示 FILE 指定导出的二进制文
  • 线程组 bijian1013 java多线程threadjava多线程线程组
    有些程序包含了相当数量的线程。这时，如果按照线程的功能将他们分成不同的类别将很有用。        线程组可以用来同时对一组线程进行操作。        创建线程组：ThreadGroup g = new ThreadGroup(groupName);  &nbs
  • top命令找到占用CPU最高的java线程 bijian1013 javalinuxtop
    上次分析系统中占用CPU高的问题，得到一些使用Java自身调试工具的经验，与大家分享。 (1)使用top命令找出占用cpu最高的JAVA进程PID:28174 (2)如下命令找出占用cpu最高的线程 top -Hp 28174 -d 1 -n 1 32694 root 20 0 3249m 2.0g 11m S 2 6.4 3:31.12 java
  • 【持久化框架MyBatis3四】MyBatis3一对一关联查询 bit1129 Mybatis3
      当两个实体具有1对1的对应关系时，可以使用One-To-One的进行映射关联查询   One-To-One示例数据 以学生表Student和地址信息表为例，每个学生都有都有1个唯一的地址(现实中，这种对应关系是不合适的，因为人和地址是多对一的关系)，这里只是演示目的   学生表   CREATE TABLE STUDENTS (
  • C/C++图片或文件的读写 bitcarter 写图片
    先看代码： /*strTmpResult是文件或图片字符串 * filePath文件需要写入的地址或路径 */ int writeFile(std::string &strTmpResult,std::string &filePath) { int i,len = strTmpResult.length(); unsigned cha
  • nginx自定义指定加载配置 ronin47
    进入 /usr/local/nginx/conf/include 目录，创建 nginx.node.conf 文件，在里面输入如下代码： upstream nodejs { server 127.0.0.1:3000; #server 127.0.0.1:3001; keepalive 64; } server { liste
  • java-71-数值的整数次方.实现函数double Power(double base, int exponent)，求base的exponent次方 bylijinnan double
    public class Power { /** *Q71-数值的整数次方 *实现函数double Power(double base, int exponent)，求base的exponent次方。不需要考虑溢出。 */ private static boolean InvalidInput=false; public static void main(
  • Android四大组件的理解 Cb123456 android四大组件的理解
     分享一下，今天在Android开发文档-开发者指南中看到的:                            App components are the essential building blocks of an Android
  • [宇宙与计算]涡旋场计算与拓扑分析 comsci 计算
         怎么阐述我这个理论呢？ 。。。。。。。。。       首先： 宇宙是一个非线性的拓扑结构与涡旋轨道时空的统一体。。。。       我们要在宇宙中寻找到一个适合人类居住的行星，时间非常重要，早一个刻度和晚一个刻度，这颗行星的
  • 同一个Tomcat不同Web应用之间共享会话Session cwqcwqmax9 session
    实现两个WEB之间通过session 共享数据 查看tomcat 关于 HTTP Connector 中有个emptySessionPath 其解释如下： If set to true, all paths for session cookies will be set to /. This can be useful for portlet specification impleme
  • springmvc Spring3 MVC，ajax，乱码 dashuaifu springjquerymvcAjax
      springmvc Spring3 MVC @ResponseBody返回，jquery ajax调用中文乱码问题解决   Spring3.0 MVC @ResponseBody 的作用是把返回值直接写到HTTP response body里。具体实现AnnotationMethodHandlerAdapter类handleResponseBody方法，具体实
  • 搭建WAMP环境 dcj3sjt126com wamp
    这里先解释一下WAMP是什么意思。W:windows，A：Apache，M：MYSQL，P：PHP。也就是说本文说明的是在windows系统下搭建以apache做服务器、MYSQL为数据库的PHP开发环境。      工欲善其事，必须先利其器。因为笔者的系统是WinXP，所以下文指的系统均为此系统。笔者所使用的Apache版本为apache_2.2.11-
  • yii2 使用raw http request dcj3sjt126com http
    Parses a raw HTTP request using yii\helpers\Json::decode()   To enable parsing for JSON requests you can configure yii\web\Request::$parsers using this class: 'request' =&g
  • Quartz-1.8.6 理论部分 eksliang quartz
    转载请出自出处：http://eksliang.iteye.com/blog/2207691 一.概述 基于Quartz-1.8.6进行学习，因为Quartz2.0以后的API发生的非常大的变化，统一采用了build模式进行构建； 什么是quartz?   答：简单的说他是一个开源的java作业调度框架，为在 Java 应用程序中进行作业调度提供了简单却强大的机制。并且还能和Sp
  • 什么是POJO？ gupeng_ie javaPOJO框架Hibernate
    POJO--Plain Old Java Objects(简单的java对象)   POJO是一个简单的、正规Java对象，它不包含业务逻辑处理或持久化逻辑等，也不是JavaBean、EntityBean等，不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口。   POJO对象有时也被称为Data对象，大量应用于表现现实中的对象。如果项目中使用了Hiber
  • jQuery网站顶部定时折叠广告 ini JavaScripthtmljqueryWebcss
    效果体验：http://hovertree.com/texiao/jquery/4.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>网页顶部定时收起广告jQuery特效 - HoverTree<
  • Spring boot内嵌的tomcat启动失败 kane_xie spring boot
    根据这篇guide创建了一个简单的spring boot应用，能运行且成功的访问。但移植到现有项目（基于hbase）中的时候，却报出以下错误：     SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.Lif
  • leetcode: sort list michelle_0916 Algorithmlinked listsort
    Sort a linked list in O(n log n) time using constant space complexity. ====analysis======= mergeSort for singly-linked list  ====code=======   /** * Definition for sin
  • nginx的安装与配置,中途遇到问题的解决 qifeifei nginx
    我使用的是ubuntu13.04系统，在安装nginx的时候遇到如下几个问题，然后找思路解决的，nginx 的下载与安装   wget http://nginx.org/download/nginx-1.0.11.tar.gz tar zxvf nginx-1.0.11.tar.gz ./configure make make install   安装的时候出现
  • 用枚举来处理java自定义异常 tcrct javaenumexception
    在系统开发过程中，总少不免要自己处理一些异常信息，然后将异常信息变成友好的提示返回到客户端的这样一个过程，之前都是new一个自定义的异常，当然这个所谓的自定义异常也是继承RuntimeException的，但这样往往会造成异常信息说明不一致的情况，所以就想到了用枚举来解决的办法。 1，先创建一个接口，里面有两个方法，一个是getCode, 一个是getMessage public
  • erlang supervisor分析 wudixiaotie erlang
    当我们给supervisor指定需要创建的子进程的时候，会指定M,F,A,如果是simple_one_for_one的策略的话，启动子进程的方式是supervisor:start_child(SupName, OtherArgs),这种方式可以根据调用者的需求传不同的参数给需要启动的子进程的方法。和最初的参数合并成一个数组，A ++ OtherArgs。那么这个时候就有个问题了，既然参数不一致，那
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他