快速入手 react项目

一、介绍

react 是一个前端框架，模块化，真正强大的不是一个库或者是这个框架，而是这一整个生态，要配置路由有 react-route，要创建动画有spring，framer-motion，要管理状态有Redux，flux，mobX,Recoil,要进行服务端渲染有Next.js，Gatsby。

1.1 搭配的UI框架

• react-bootstrap: 文档
• semantic: 文档
• meterial-ui:文档

二、最佳实践

2.1 创建一个项目

 npx create-react-app my-react
 //如果想创建带ts的项目用
 npx create-react-app my-react-ts --template typescript

2.2 项目介绍

2.3 构建运行

npm start

三、组件

3.1 函数组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

此函数是一个有效的React组件，因为它接受单个“props”（代表属性）对象参数与​​数据并返回一个React元素。我们称这些组件为“函数组件”，因为它们实际上是JavaScript函数

但是这种函数组件是无状态的，也就是没办法改变传递的props，这种不需要分配多余的内存，无法访问组件this中的对象

3.2 类组件

React.createClass和React.Component都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法

const Contacts = React.createClass({  
  handleClick() {
    console.log(this); // React Component instance
  },
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }
});

React.createClass创建的组件,this会自动绑定，这个this 是有值的

class Contacts extends React.Component {  
  constructor(props) {
    super(props);
  }
  handleClick() {
    console.log(this); // null
  }
  render() {
    return (
      <div onClick={this.handleClick}></div>
    );
  }

React.Component有三种手动绑定方法：可以在构造函数中完成绑定，也可以在调用时使用method.bind(this)来完成绑定，还可以使用arrow function来绑定。是不会自动绑定的。

3.3 hook

类组件功能全而重，函数组件轻量而没有状态、没有生命周期，react提供了钩子(加强版函数组件)，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。不同的功能就用不同的钩子

• useState() ： 状态钩子
• userContext() ：共享状态钩子
• userReducer() ： Action钩子
• useEffect() ：副作用钩子
  一般定义钩子要用use开头，如果自己定义钩子也要用use开头