React学习

官网：

https://reactjs.org/

https://zh-hans.reactjs.org/

https://beta.reactjs.org/

3 简介

• 声明式UI。命名式类似于函数。
• 组件化
• 夸平台支持比较好

4 基础环境搭建

• 先安装 nodejs https://nodejs.org/en
• 再下载一个简单的react项目  npx create-react-app react-basic

5 目录

核心包

    "react": "^18.2.0",
    "react-dom": "^18.2.0",

7 jsx 基础

写前端，先写html。javascript xml。比较简单，又能有js的功能。

融合了 js 和 html 的语法。

机器编译成了 js格式。

8 jsx 表达式使用

{js表达式}

const name = 'ni hao'
<h1>{name}</h1>

9 jsx 列表渲染

const songs = [
    {id: 1, name: 'A'},
    {id: 2, name: 'B'},
    {id: 3, name: 'C'},
]

function App() {
    return (
        <div className="App">
            <ul>
                {songs.map(song => <li key={song.id}>{song.name}</li>)}
            </ul>
        </div>
    );
}

export default App;

10 条件渲染

三元表达式（常用）

const flag = true
function App() {
    return (
        <div className="App">
            {flag ? <span>WN</span> : null}
        </div>
    );
}

export default App;

 

条件运算

const flag = true
function App() {
    return (
        <div className="App">
            {true && <div> no </div>}
        </div>
    );
}

export default App;

11 jsp 模板精简原则

模板中逻辑尽量精简。

复杂多分枝逻辑 收敛为一个函数 通过一个函数来写分枝逻辑 模板中负责调用

const getHtag = (x) => {
    if (x === 1) return <h1> x1</h1>
    else return <h1>x else</h1>
}
function App() {
    return (
        <div className="App">
            {getHtag(1)}
        </div>
    );
}

export default App;

12 JSP  样式控制

1）行内样式

在元素身上绑定一个style 属性即可

const style = {
    color: 'blue',
    fontSize: '30px'
}

function App() {
    return (
        <div className="App">
            <span style={style}>this is span</span>
        </div>
    );
}

export default App;

 

2）类名样式 (常用）

在元素身上绑定一个 className

import './app.css'
function App() {
    return (
        <div className="App">
            <span className='active'>this is span</span>
        </div>
    );
}

export default App;

 

13 jsx 动态类名

import './app.css'

const flag = true

function App() {
    return (
        <div className="App">
            <span className={flag ? 'active' : ''}>this is span</span>
        </div>
    );
}

export default App;

 

14 jsx 注意事项

• jsx必须要有个根节点。
• 所有标签必须闭合
• jsx语法更贴近js
• jsx支持换行，需使用()包裹，防止bug

 

15 开发工具和格式化代码

安装插件。

 

17 组件

把小功能抽离，再组装。

 

18 函数组件的创建和渲染

function Hello() {
    return <div>hello</div>
}

function App() {
    return (
        <div className="App">
            <Hello></Hello>
        </div>
    );
}

export default App;

• 组件名称必须大写
• 函数组件必须要有返回值

 

19 类组件的创建和渲染

import React from "react";

class HelloComponent extends React.Component {
    render() {
        return <div>This is from a class</div>
    }
}

function App() {
    return (
        <div className="App">
            <HelloComponent></HelloComponent>
        </div>
    );
}

export default App;

用法和函数组件差不多，必须 extends React.Component

 

20 事件绑定

on + 事件名称 = {事件处理程序}

import React from "react";


function Hello() {
    const clickHandler = () => {
        console.log('click handler')
    }
    return <div onClick={clickHandler}>Hello</div>
}

class HelloComponent extends React.Component {
    //标准写法
    clickHandler = () => {
        console.log('click handler')
    }

    render() {
        return <div onClick={this.clickHandler}>This is from a class</div>
    }
}

function App() {
    return (
        <div className="App">
            <Hello/>
            <HelloComponent/>
        </div>
    );
}

export default App;

 

21 事件对象e

import React from "react";

class HelloComponent extends React.Component {
    //标准写法
    clickHandler = (e) => {
        e.preventDefault()
        console.log('click handler')
    }

    render() {
        return <div><a onClick={this.clickHandler} href="https://www.baidu.com">百度</a></div>
    }
}

function App() {
    return (
        <div className="App">
            <HelloComponent/>
        </div>
    );
}

export default App;

 

22 组件-事件绑定额外参数

加入事件参数e，如果不加入则删除

import React from "react";

class HelloComponent extends React.Component {
    //标准写法
    clickHandler = (e, msg) => {
        console.log('click handler', e, msg)
    }

    render() {
        return <div onClick={(e) => this.clickHandler(e, 'msg param')}>Hello </div>
    }
}

function App() {
    return (
        <div className="App">
            <HelloComponent/>
        </div>
    );
}

export default App;

 

23 组件状态

类组件状态：使用state，如果要修改使用setState

 

24 this 指向问题说明

在类中无法使用this，如果非要使用，使用bind绑定

或者使用箭头函数

 

29 组件不可变状态说明

• 数字可以直接+1
• 数组，拿原值，再操作
• 对象同上

30 受控组件

input状态被React组件状态控制

• 在组件的state声明一个组件状态数据
• 将状态数据设置成input标签元素的value属性的值
• 为input添加change事件
• 通过e获取input的值
• 调用setState更改值

31 tab切换实现

使用state状态记录一个值

 

37 组件通信

各组件数据交互就是组件通信

父子关系。最重要

 

38 父传子

• 父组件提供数据state
• 给自组件中添加数据的值为state中的值
• 子组件通过props接受父组件的值 （类中使用 this.props 获取 props， 函数中用 props

39 父传子 props说明

props是单向传递，只读

props可以传递任何数据

 

40 props的解构

就是参数分开写

class 组件自身的问题

 

44 跨组件通信context

用provider 和consumer

 

60 hook

组件状态逻辑复用问题

class 问题