十八周学习前端的Vue.js框架和react框架的笔记记录,如如何把babel安装到vs code中?

1.环境搭建

2.node.js和npm的安装。

3.Babel 是一个 JavaScript 编译器本文。在vs code中安装babel.

参考https://blog.csdn.net/Cinderella___/article/details/81071098

4.元素渲染是构成React应用的最小砖块。

如const element = <h1>Hello,World!</h1>

和浏览器的dom不同，React元素始创件开销极小的普通对象。React DOM 会负责更新DOM来与React元素保持一致。

5.元素和组件的区别！

组件，从概念上类似于javascript函数，他接受任意的入参（即props），并返回用于描述页面的展示内容的React元素。

组件无论是使用函数声明还是通过class声明，都不能修改自身的props。

组件名称必须以大写字母开头，小写字母会视为原生DOM标签，例如<div />代表HTML的div标签，而<Welcome />则代表一个组件，并且需要在作用域内使用Welcome。

6.函数组件和class组件

函数组件:

  function Welcome(props) {

     return <h1>Hello,{props.name}</h1>;

  }

class组件

class Welcome extends React.Component {

  render() {

     return <h1>Hello,{this.props.name}</h1>

  }

}

7.组件的组合和提取。

8.props的只读性。

组件无论是使用函数声明还是通过class声明，都决不能修改自身的props,如

function sum(a,b) {

    return a+b;

}

这样的函数被称为纯函数，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

反之，下面的函数不是纯函数，因为他更改了自己的入参：

function withdraw(account,account){

    account.total -=amount;

}

所有的React组件都必须像纯函数一样保护他们的props不被更改。

9.React中的state和生命周期。

State和props类似，但是state是私有的，并且完全受控于当前组件。

i 时间例子

class Clock extends React.Component {
  //添加一个class构造函数，然后在该函数中为this.state赋初值
  constructor(props) {
   super(props);
    this.state = {date: new Date()};
  }
  render () {
    return (
    <div>
      <h1>Hello,World</h1>
      <h2>This is {this.state.date.toLocaleTimeString()}.</h2>
   </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock />,
    document.getElementById('root')
  );
}
setInterval(tick,1000);

ii 将生命周期方法添加到Class中。挂载mount 和卸载 unmount

componentDidMount() {

    this.timerID = setInterval (

 () => this.tick(),

1000

);

}

componentWillUnmount() {

    clearInterval(this.timerID);

}

使用this.setState()来时刻更新组件state。

构造函数是唯一可以给this.state赋值的地方。不能直接修改State，例如this.state.comment = 'Hello';是错的；

this.setState({comment:'Hello'});是正确的重新渲染组件方式。

10.React和传统的DOM的区别：

 i React事件的命名采用小驼峰式，而不是纯小写。

 ii 使用JSX语法时，需要传入一个函数作为事件处理函数，而不是一个字符串。

<button onClick={activeLesers}>

Active Lasers

</button> 

传统的HTML 如下：

<button οnclick="activateLasers()'>

Active Lasers

</button>

 iii 在React中不能通过返回false的方式阻止默认行为。必须使用preventDefault。

11.在回调函数中的ｔｈｉｓ不可缺少，ｃｌａｓｓ的方法默认不会绑定ｔｈｉｓ。

 

 

这不是ｒｅａｃｔ特有的行为，通常情况下，如果没有在方法后面加（），例如　onClick={this.handleClick },你应该为这个方法绑定this。