react基础（一）

特点：

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件

2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

一.准备

搭建本地开发环境

npm i -g create-react-app

创建目录

create-react-app X名X

启动配置

npm start启动项目
npm run eject暴露webpack配置文件
npm run build打包项目

目录内文件详解

二.步入正题

浅入了解：

jsx语法，函数组件，类组件，模板语法，事件，State状态更新

1.jsx语法

javascript混合xml （html）语法格式，目的更好的在javascript中写html模板

特点：
1）.只有一个根节点
2）. {}写javascript
3）.数组可以直接写htmI标签
4）.对象样式自动展开
5）. {/*注释*/}
6）.类名用className

2.函数组件

无状态组件/视图组件/

function App{
    return(<></>)
}
export default App;

3.类组件

有状态组件/容器组件/
快捷键：rcc
 

import React, { Component } from 'react'

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

4.模板语法

文本渲染：

文本渲染:{}
html渲染: dangerouslySetInnerHTML={{ __html:XXX }}

条件渲染

三元运算符号: 条件？<>:<>
&&符号: {{条件&&<>}}

列表渲染

this.state.list.map(item => <h3 key={item}>{item}</h3>)

5.事件

和普通js事件一致，需要驼峰式写法

onClick={this.sayHj}
onClick={()=>{this. sayHi(参数)}}
onClick={this.sayHi.bind(this,参数)}

6.State状态更新

this.setState{{k:v}}
this.setState({k:v},()=>console.log("执行完毕的回调函数"))

三.上述代码

// .active{
//   color: #ff7700;
// }
//引入css .active
import './App.css'
function App() {
  var arr = [
    <h3>我喜欢jquery Dom和ajax操作</h3>,
    <h3>我爱react的组件</h3>,
    <p>vue很nice</p>
  ]
  var styles = {
    fontSize: "48px",
    color: "#f70"
  }
  return (
    <div>你好react
      {/* <p className='active'>我爱大前端</p>
      <p>{2 + 3}</p> */}
      {arr}
      <p style={styles}>我是一行文本</p>
    </div>
  )
}
export default App;

import React, { Component } from 'react'

export default class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "你好<strong>我喜欢</strong>react",
            isLog: false,
            list: ['vue', 'react', 'jQuery', 'js']
        }
    }
    sayHi = (msg = '我爱中国') => {
        alert(msg)
    }
    render() {
        return (
            <div>
                {/* 更新数据 setState */}
                <button onClick={() => {
                    this.setState({ isLog: !this.state.isLog }, () => {
                        console.log("切换数据完毕")
                    })
                }}>切换</button>
                {/* 事件 */}
                <button onClick={this.sayHi.bind(this, '中国人不骗中国人')}>问候-传参</button>
                <button onClick={() => { this.sayHi('我是中国人') }}>问候-传参</button>
                <button onClick={this.sayHi}>问候-许愿</button>
                <button onClick={() => alert('2022新年快乐')}>问候</button>
                {/* 列表渲染 */}
                {this.state.list.map(item => <h3 key={item}>{item}</h3>)}
                {/* 文本渲染 */}
                {this.state.msg}
                <div dangerouslySetInnerHTML={{ __html: this.state.msg }}></div>
                {/* 条件渲染 */}
                {this.state.isLog ? <p>欢迎回来小可爱</p> : <p>请登录</p>}
                {this.state.isLog && <p>中午红烧肉</p>}
            </div>
        )
    }
}