react 体验[更新中]

Posted 2020-10-14 Grewer

用了 vue 大半年了,不过我在2016年暑假的时候就看到了 react 这个项目,学习了一番,不过之前学习的都是基础语法和一些基础用法吧,总的来说 mvvm 框架确实都很相似,会一个就可以了;

今天我的配置 react 的时候,搜索过后,发现很多都是一步一步来配置文件的,不过也有好处可以帮助我理解 webpack ,不过这配置也太慢了,如果没存好,还得再来一遍吗?

当然不是,我找到了快速搭建项目的指令:

1.

npm install -g create-react-app

2.

create-react-app [你想要的项目名称]

3.

如果速度太慢的话,可以使用 cnpm;

到这,项目会自动跳出如下提示:

Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd grewer
  npm start

基本都很清楚了;

文件结构是这样的:

配置到这基本可以了,有点感冒,后面再更

11.21

首先我想说的是 mvvm 框架真的是很相似,我从最基础的结构开始说;

Vue 和 react 的数据都是存在一个data 里,每一个组件都有一个存储的data,如果不用 vuex 和 redux, 这就是唯一的存储的位置,react 提供了一个函数来修改: setState,而 Vue 是直接修改data

再就是指令,这方面 Vue 的有他的指令,比如 v-on:click="clickMe"可以缩写成@click="clickMe" 而且可以快速绑定键位,比如@keyup.enter="submit",就是绑定了回车键 而react 是直接在组件或者 DOM 上写 onClick={this.clickMe}而且在 事件的传值方面也会麻烦一点,比如 onClick={this.deleteRow.bind(this, id)} 这样传递,而 Vue 的话 可以直接传:@click="submit(data)",感觉方便一点;指令虽然都是语法糖,但是用起来还是更爽一点.

Vue和 react 的传值都是通过props 来传递的 (如果没有其他的插件或框架), 这一点都是差不多的;

再就是最重要的组件.Vue 的组件(我这里只讲es6)一般是一个页面一个组件而且有了新的后缀: page.vue, 他的 html,js,css 是写在一个页面中的, style 加上 scoped 的指令 就可以实现该页面单独的 css,一般 script 里都是 template包裹,

当我使用react 的组件时还是比较震惊的因为他的自由度确实比较大,首先一个组件可以是一个 function 也可以是一个 class(这里说的不是 css里的class),比如,当前页面有一个组件:

注意从这里开始,代码里的...(省略号)都表示省略部分代码!

class grewer extends React.Component{
     constructor(props){
         super(props);
        this.state = {}

    }  
    render(){
        return <div>Hello!</div>;
    }    

}

 

 

react 的引用组件可以是任何位置的,比如他在当前页面的话:

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}



class www extends React.Component {
...
    render(){
     return <div>Hello!<LoginButton onClick="this.methods" /></div>;  

}

...
}

 

 可以直接就放在上面了,而如果是其他页面,也可以引用,如:

components.js:

class www extends React.Component {...};

export default www;

　　

index.js(主页面):

import Grewer from \'./components.js\';

　　

然后再 render 里写上 

<Grewer  />

就可以了;

而且这一个components.js 文件可以写成一个组件引用的块,

在 component.js 里写多个 function 或者 class 通过 export default {qq,ww,ee}

而 index.js 页面

import Grewer from \'./components.js\';　　

后

可以通过

let Q = Grewer.qq

在 render 里写入: 

<Q />

也可以这样 : 

<Grewer.qq />;

要注意 vue和 react 都强调组件首字母都要大写;

而且我发现 react 可以引用当前组件里的函数当组件,一般来说组件名称写成小写会被认为是 HTML 元素,

但是我这样写 

class www extends React.Component {    
...
test=()={...}
render(){
  return <div><this.test /></div>

  }
}

 这样是可以成功的,但是我也是感觉怪怪的,首先从规范上来说就是不行的,其次能在当前组件里写出来,为什么不能直接写出来呢,有点多此一举;

这个也只是一项小实验;

然后关于 api ,Vue 确实提供的 api比较多,比如 computed,watch,filters 等等,而 react 就像把函数都放在了 methods 一样,怪不得人们都说 Vue 适合新手,因为他有着规范,某个函数该写在哪里就写在那里,就算水平差,写出来的也还是能看的;

而 react 就不一样了,自由度非常大,正因为这样,也会比较考验使用者的水平;