菜鸟React（一）

项目搭建

第一步
全局安装脚手架
npm i create-react-app –g
全局安装脚手架

第二步
npm config set registry https://registry.npm.taobao.org
设置cnpm为默认下载服务器（加快下载速度）

第三部
create-react-app react-demo

第四部
进入目录 npm run start

React组件介绍

React中，组件是可分为函数组件和类组件，不管哪种方式定义的组件，其组件名都必须是大写

大小写区别
组件大小写是为了区别通过HTML标签定义的JSX，大写的组件在定义时，其type会是React.Component类型，若是将组件名写成了小写，则定义时会将其当作HTML标签定义进行，以下是实例，一个大写的Simple，一个小写simple

所以只有一些代码片段的时候适合用函数组件，涉及复杂逻辑就要用类组件。

虽然 React 很灵活，但是它有一条严格的规则：所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

props需不需要写在constructor

1、如果不需要 在 constructor里面使用 this.props ，是可以不用给super传props的

2、如果不要在constructor写逻辑，仅仅是写一个super(props)，实际上整个constructor都没有写的必要

常用生命周期函数

https://www.jianshu.com/p/a5d1eadc31ae

正确使用state

react-state正确使用

如果要修改state的值必须通过setState，其中有两种传递参数的方法

传入新的 state 对象
this.setState({
  age: 2,
});
传入回调函数，并在回调函数里面返回新的 state 对象
this.setState((prevState, props) => {
  return {
    age: prevState.age + props.age,
  };
});
//使用箭头函数略写
this.setState((prevState, props) => ({
  age: prevState.age + props.age
}));

注意箭头函数返回对象的写法

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错
// SyntaxError:
x => { foo: x }
因为和函数体的{ ... }有语法冲突，所以要改为
// ok:
x => ({ foo: x })

三种方法解决事件this指向问题
1．handleClick = () => {
    console.log('this is:', this);
  }

2. <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>

3.
constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 这个绑定是必要的，使`this`在回调中起作用
    this.handleClick = this.handleClick.bind(this);
  }