此文项目代码：https://github.com/bei-yang/I-want-to-be-an-architect
码字不易，辛苦点个star，感谢！

引言

---

此篇文章主要涉及以下内容：

1. react基础语法
2. 官方create-react-app脚手架
3. JSX语法
4. setState
5. react生命周期
6. props传递参数
7. react组件通信

学习资源

---

• react
• create-react-app

起步

---

上手

1. npm install -g create-react-app 安装官方脚手架
2. create-react-app react01初始化
3. react的api比较少，基本学一次，就再也不用看文档了，核心就是js的功力
4. demo体验

文件结构

|——README.md            文档
|——package-lock.json
|——package.json         npm依赖
|——public               静态资源
|      |——favicon.ico
|      |——index.html      
|      |——manifest.json
|——src                  源码
      |——App.css
      |——App.js         根组件
      |——App.test.js    测试
      |——index.css      全局样式
      |——index.js       入口
      |——logo.svg
      |——serviceWorker.js pwa支持

React和ReactDom

---

React设计之初，就是使用JSX来描述UI，所以解耦和dom操作，react只做逻辑层，reactDom去渲染实际的dom，如果换做移动端，就使用别的渲染库。

删除src下面所有代码，新建index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './App'

ReactDom.render( < App / > , document.querySelector('#root'))

新建App.js

import React,{Component} from 'react'

export default class App extends Component{
  render(){
    return (
      <div>
        <button>nihao</button>
      </div>
    )
  }
}

export default AppTest

JSX

上面的代码会有一些困惑的地方，首先就是JSX语法。

ReactDom.render(<App/>,document.querySelector('#root'));

看起来就是js和html的混合体，被称之为JSX，实际核心的逻辑完全是js实现的。

JSX实质

jsx实质就是React.createElement的调用，对比下图：

class VS 函数组件

如果一个组件只根据props渲染页面，没有内部的state，我们完全可以用函数组件的形式来实现（hooks的到来会改变这个现状）

import React from "react";

// 函数类型的组件
export function Welcome1(props) {
  return <div>Welcome1, {props.name}</div>;
}

// 基于类的组件
export class Welcome2 extends React.Component {
  render() {
    return <div>Welcome2, {this.props.name}</div>;
  }
}

props属性传递

ReactDOM.render(<App title="react真不错" />, document.querySelector('#root'));
...
<h2>{this.props.title}</h2>

State和setState

在APP组件里，我们可以通过{}在jsx中渲染变量

import React from 'react'

class Test extends React.Component {
  render() {
    const name = 'test'
    return (
      <div>
        <button> {name} </button>{' '}
      </div>
    )
  }
}

export default Test

如果数据需要修改，并且同时页面响应变化，我们需要放在state中，并且使用setState来修改数据

【注意】：

1. 请不要直接修改状态值

this.state.counter+=1

2. 批量执行，新值依赖老的值，使用函数式写法。

// 会统一进入队列，如果不是函数式写法只会执行一次
this.setState(obj,cb)
this.setState(fn,cb)

this.setState(prevState=>{
  return {
    counter:prevState.counter+1
  }
})
this.setState(prevState=>{
  return {
    counter:prevState.counter+1
  }
})

条件渲染和循环

React的api不多，条件渲染和循环，都是普通的js语法。

import React from 'react'

class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'test-name',
      showTitle: true,
      goods: [
        { text: '百万年薪架构师', price: 100, id: 1 },
        { text: 'web全栈架构师', price: 80, id: 2 },
        { text: 'Python爬虫', price: 60, id: 3 }
      ]
    }
    setTimeout(() => {
      this.setState({
        showTitle: false
      })
    }, 2000)
  }
  render() {
    return (
      <div>
            {this.state.showTitle && <h2>{this.props.title}</h2>} 
        <ul>
          {this.state.goods.map((good, i) => {
            return (
              <li key={good.id}>
                     <span>{good.text}</span>
                     <span>{good.price}</span>元      
                <button onClick={() => this.handleClick(i)}>添加购物车</button>
              </li>
            )
          })}
                
        </ul>
           
      </div>
    )
  }
}

你的赞是我前进的动力

求赞，求评论，求分享...