React.js和Vue.js的语法并列比较

React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法，不过限于篇幅，这篇文章只比较React.js和Vue.js，下一篇再谈Next.js个Nuxt.js。

Github： https://github.com/oahehc/rea...

Render

React.js

ReactDOM.render(, document.getElementById("root"));

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");

基本组件

React.js

Class component

class MyReactComponent extends React.Component {
  render() {
    return Hello world;
  }
}

Function component

function MyReactComponent() {
  return Hello world;
}

Vue.js

Prop

React.js

function MyReactComponent(props) {
  const { name, mark } = props;
  return Hello {name}{mark};
}
MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...

Vue.js

...

事件绑定

React.js

Class component

class MyReactComponent extends React.Component {
  save = () => {
    console.log("save");
  };
  render() {
    return ;
  }
}

Function component

function MyReactComponent() {
  const save = () => {
    console.log("save");
  };
  return ;
}

Vue.js

自定义事件

React.js

function MyItem({ item, handleDelete }) {
  return ;
  /*
   * 应用useCallback钩子来防止在每次渲染时生成新的函数。
   *
   * const handleClick = useCallback(() => handleDelete(item), [item, handleDelete]);
   *
   * return ;
  */
}
...
function App() {
  const handleDelete = () => { ... }
  return 
}

Vue.js

...

State

React.js

Class component

class MyReactComponent extends React.Component {
  state = {
    name: 'world,
  }
  render() {
    return Hello { this.state.name };
  }
}

Function component

function MyReactComponent() {
  const [name, setName] = useState("world");
  return Hello {name};
}

Vue.js

Change-State

React.js

Class component

class MyReactComponent extends React.Component {
  state = {
    count: 0,
  };
  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
    // 在更新之前获取当前状态，以确保我们没有使用陈旧的值
    // this.setState(currentState => ({ count: currentState.count + 1 }));
  };
  render() {
    return (
      
        {this.state.count}
        
      
    );
  }
}

Function component

function MyReactComponent() {
  const [count, setCount] = useState(0);
  const increaseCount = () => {
    setCount(count + 1);
    // setCount(currentCount => currentCount + 1);
  };
  return (
    
      {count}
      
    
  );
}

Vue.js

双向绑定 (仅Vue.js)

React.js

React没有双向绑定，因此我们需要自己处理数据流

function MyReactComponent() {
  const [content, setContent] = useState("");
  return (
     setContent(e.target.value)}
    />
  );
}

Vue.js

计算属性

React.js

React.js没有计算属性，但我们可以通过react hook轻松实现

function DisplayName({ firstName, lastName }) {
  const displayName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);
  return {displayName};
}
...

Vue.js

...

Watch

React.js

React.js没有 watch 属性，但是我们可以通过react hook轻松实现

function MyReactComponent() {
  const [count, setCount] = useState(0);
  const increaseCount = () => {
    setCount((currentCount) => currentCount + 1);
  };
  useEffect(() => {
    localStorage.setItem("my_count", newCount);
  }, [count]);
  return (
    
      {count}
      
    
  );
}

Vue.js

Children-and-Slot

React.js

function MyReactComponent({ children }) {
  return {children};
}
...
Hello World

Vue.js



...
Hello World

渲染HTML

React.js

function MyReactComponent() {
  return ...

" }} />;
}

Vue.js

条件渲染

React.js

function MyReactComponent() {
  const [isLoading, setLoading] = useState(true);
  return (
    
      {isLoading && Loading...}
      {isLoading ? is loading
 : is loaded}
    
  );
}

Vue.js

列表渲染

React.js

function MyReactComponent({ items }) {
  return (
    
      {items.map((item) => (
        
          {item.name}: {item.desc}
        
      ))}
    
  );
}

Vue.js

Render-Props

React.js

function Modal({children, isOpen}) {
  const [isModalOpen, toggleModalOpen] = useState(isOpen);
  return (
    
      {type children === 'function' ? children(toggleModalOpen) : children}
    )
  ;
}
Modal.propTypes = {
  isOpen: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
}
Modal.defaultProps = {
  isOpen: false,
}
...

  {(toggleModalOpen) => {
    
      ...
      
    
  }}

Vue.js(slot)

...

生命周期

React.js

Class component

class MyReactComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {}
  componentDidMount() {}
  shouldComponentUpdate(nextProps, nextState) {}
  getSnapshotBeforeUpdate(prevProps, prevState) {}
  componentDidUpdate(prevProps, prevState) {}
  componentWillUnmount() {}
  render() {
    return Hello World;
  }
}

Function component

function MyReactComponent() {
  // componentDidMount
  useEffect(() => {}, []);
  // componentDidUpdate + componentDidMount
  useEffect(() => {});
  // componentWillUnmount
  useEffect(() => {
    return () => {...}
  }, []);
  // 在渲染之后但在屏幕更新之前同步运行
  useLayoutEffect(() => {}, []);
  return Hello World;
}

Vue.js

错误处理

React.js

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError(error) {
    // 更新状态，这样下一个渲染将显示回退UI。
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {}
  render() {
    if (this.state.hasError) return Something went wrong.;
    return this.props.children;
  }
}
...

Vue.js

const vm = new Vue({
  data: {
    error: "",
  },
  errorCaptured: function(err, component, details) {
    error = err.toString();
  }
}

Ref

React.js

Class component

class AutofocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  state = {
    content: "",
  };
  componentDidMount() {
    this.ref.current.focus();
  }
  setContent = (e) => {
    this.setState({ content: e.target.value });
  };
  render() {
    return (
      
    );
  }
}

Function component

function AutofocusInput() {
  const [content, setContent] = useState("");
  const ref = useRef(null);
  useEffect(() => {
    if (ref && ref.current) {
      ref.current.focus();
    }
  }, []);
  return (
     setContent(e.target.value)}
    />
  );
}

Vue.js

性能优化

React.js

PureComponent

class MyReactComponent extends React.PureComponent {
  ...
}

shouldComponentUpdate

class MyReactComponent extends React.Component {
  shouldComponentUpdate(nextProps) {...}
  ...
}

React.memo

export default React.memo(
  MyReactComponent,
  (prevProps, nextProps) => {
    ...
  }
);

useMemo

export default function MyReactComponent() {
  return React.useMemo(() => {
    return ...;
  }, []);
}

useCallback

function MyItem({ item, handleDelete }) {
  const handleClick = useCallback(() => handleDelete(item), [
    item,
    handleDelete,
  ]);
  return ;
}

Vue.js

v:once

This will never change: {{msg}}

函数式组件：我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

keep-alive 组件

文章首发《前端外文精选》微信公众号

如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

继续阅读其他高赞文章

更多...

React.js和Vue.js的语法并列比较

Render

基本组件

React.js

Hello world

Hello world

Vue.js

Hello World

Prop

Hello {name}{mark}

Hello {{ name }}

事件绑定

React.js

Vue.js

自定义事件

State

React.js

Hello { this.state.name }

Hello {name}

Vue.js

Hello {{ name }}

Change-State

React.js

Vue.js

双向绑定 (仅Vue.js)

React.js

Vue.js

计算属性

React.js

Vue.js

Watch

React.js

Vue.js

Children-and-Slot

渲染HTML

条件渲染

列表渲染

Render-Props

生命周期

React.js

Vue.js

错误处理

Something went wrong.

Ref

React.js

Vue.js

性能优化

React.js

Vue.js

Hello {{ name }}

你可能感兴趣的:(vue.js,react.js,前端,javascript)