本文作者：

初识React

React是什么

1. react、vue、angular俗称前端框架三驾马车
2. React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了
3. React 是一个用于构建用户界面的 JAVASCRIPT 库。
4. React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）

React的特点

脚手架 - 我的第一个react项目

“脚手架”是一种元编程的方法，输入一行命令就可以帮助我们快速构建代码模版。

1. 全局安装脚手架

npm install -g create-react-app // window 平台
sudo npm install -g create-react-app // mac/linux 平台

2. 使用脚手架新建项目

create-react-app react-demo // react-demo 是你的项目名称

3. 启动项目

cd react-demo
npm run start

4. 启动成功

React必备基础知识

JSX

我们来看一下如下代码：

const element =

Hello, world!

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，事实上它具有 JavaScript 的全部功能。

JSX表达式怎么写？

1. 普通渲染

    <h1>我就是jsx</h1>

2. 数学表达式

    <h1>{1 + 1}</h1>

3. 字符串

    <h1>{'hello world'}</h1>

4. bool类型-无法渲染

    <h1>{isBoy}</h1>

5. 使用变量

    <h1>{msg}</h1>

6. 三目运算符

    <h1>{isBoy ? "男生" : "女生"}</h1>

7. 调用方法

  const format = (msg) => {
     return '---' + msg + '---';
   }    

  <h1>{format(msg)}</h1>

8. 使用对象

   const lamian = {
     name: "拉面"
   };

  <h1>{lamian.name}</h1>

JSX嵌套语法与循环

import React from 'react';
import ReactDOM from 'react-dom';

const list = ['苹果', '香蕉', '雪梨', '西瓜'];

const App = () => {
  return (
    <div >
      {
        <div>
          {
            list.map(v => <h1 key={v}>{v}</h1>) // 遍历数组
          }
        </div>
      }
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

JSX标签属性

jsx标签上可以设置绝大部分html标签的属性，如 checked、图片的src等，但需要注意几个点：

1. html的class属性改为className

     <div className="redCls">??☁️</div>

2. html中label标签的for属性改为htmlFor

  <label htmlFor="inp">
          点我点我
            <input id="inp" type="text" />
  </label>

3. 标签中的自定义属性使用data

  <div data-index={'hello'} >自定义属性</div>

4. 渲染 html字符串 使用 dangerouslySetInnerHTML 属性

  <li dangerouslySetInnerHTML={{__html:"<i>来啊呀</i>"}}></li>

5. bool类型的值 可以这样用

  <input type="checkbox" checked={true} />

6. 当属性太多了，可以使用 ... 扩展运算符

  const props={
   className:"redCls",
   "data-index":5
  }

 <div {...props}>展开属性</div>

7. 行内样式的写法

  <div style={{ color: 'yellow', fontSize: "150px", "backgroundColor": 'red' }} > 颜色真不错</div>

组件的创建

在react中，组件分为两种，类组件 和 函数式组件

1. 简单功能 使用 函数式组件
2. 复杂功能 使用 类组件
3. 组件名都必须大写

类组件

使用ES6创建Class的方式来实现一个组件类

• 首字母要大写
• 要继承 React中的Component类
• 必须实现render函数，函数内返回标签
• 组件有自己的state和生命周期

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import "./index.css";

 class App extends Component {
  render() {
    return (
      <div>
        嘿嘿嘿
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

函数式组件

函数式组件其实就是一个函数，只不过函数内部需要返回对应的标签

• 首字母要大写
• 函数内要返回标签

import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";

const App = () => {
  return (
    <div>简单的函数式组件</div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

小结

• 函数式组件性能更高，因为没有生命周期
• 函数式组件更方便进行测试
• 能不用类组件就不用类组件
• 当要使用 state 时，就要使用类组件

状态和属性

在React中，用状态(state)和属性(props)来实现数据动态化。下面分别来讲讲这两个概念。

状态：state

怎么理解state？

• 在react中，组件内部的数据是通过state来实现和管理
• 可以理解为state就是Vue中的data

为什么需要state？

我们之前使用变量，都是脱离了组件本身。而组件自身是应该具有私有和独立的数据（状态）的，这个私有的数据和状态就叫做 state，以后，只要说到数据的状态 那么就是指类组件中的state

state的声明和使用（两种方式）

1. 类属性的方式声明

 class Person extends Component {
  // 1 声明 state
  state = {
    date: "2021",
    msg: "你好"
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

2. 构造函数中声明

 class Person extends Component {
  // 1 构造函数中 声明 state
  constructor() {
    // 1.1 必须在this之前调用super()方法
    super();
    this.state = {
      date: "2009",
      msg: "天啊天啊"
    }
  }
  render() {
    return (
      <div>
        {/* 2 使用state */}
        <h1>{this.state.date}</h1>
        <h2>{this.state.msg}</h2>
      </div>
    )
  }
}

state的赋值（注意区别赋值和声明）

• state的赋值方式只能通过 this.setState方法 来实现。

• state的赋值是异步的。

怎么体现？看看下面打印的值

 class Person extends Component {
  state = {
    date: 2010
  }
  handleClick = () => {
    let { date } = this.state;

    // 1 修改state中的日期 增加 2000
    this.setState({
      date: date + 2000
    });

    // 2 看看这个date是多少
    console.log(this.state.date);
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，我们希望在一设置值的时候，就希望马上得到最新的state的值，那么可以将代码改为下列的写法

给setState添加一个回调函数，回调中可以获取到修改后最新的state的值

 class Person extends Component {
  state = {
    date: 2008
  }

  handleClick = () => {
    let { date } = this.state;

    // 添加一个回调函数
    this.setState({
      date: date + 3000
    }, () => {
      // date的值为 3008
      console.log(this.state.date);
    });
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <h1>{this.state.date}</h1>
      </div>
    )
  }
}

有时候，setState还可以接收一个函数，函数内可以实时获取state中的值，不存在延迟

    this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1000
      }
    })

    this.setState(preState => {
      console.log("上一次的state", preState.date);
      return {
        date: preState.date + 1
      }
    })

属性 props

props意思是属性，一般存在父子组件中。主要用于 父向子传递数据。

下面我们通过代码来演示一下

1. 声明父组件，并在标签上通过属性的方式进行数据传递

   import HomeTop from '相对路径'		// 引入子组件
   import HomeFooter from '相对路径'
   
   class Home extends Component {
     state = {
       color: "blue",
       size: 100
     }
     render() {
       return (
         <div>
           <HomeTop acolor={this.state.color} asize={this.state.size} ></HomeTop>
           <HomeFooter bcolor={this.state.color} bsize={this.state.size}  ></HomeFooter>
         </div>
       )
     }
   }

3. 声明一个类组件 HomeTop，通过 this.props 来获取父组件的数据

   class HomeTop extends Component {
     render() {
       return (
         <h1>屋顶的颜色是 {this.props.acolor} 尺寸 {this.props.asize}</h1>
       )
     }
   }

4. 声明一个函数式组件HomeFooter，父组件传递的数据 需要在函数的形参props上接收

   const HomeFooter = (props) => {
     return <h1>屋底的颜色是 {props.bcolor}  尺寸 {props.bsize}</h1>
   }

写在最后

对于想要熟练react开发的同学而言，要学习的内容还有不少，包括但不限于react的生命周期、hooks、以及redux等，由于篇幅限制就先和大家分享到这里。希望本文的内容可以对你有一点点帮助。