React(Js)学习

React(Js)学习

网络请求的封装

//泛型T根据json格式规定相应的返回数据类型
async function request<T>(method: string, url: string, data?: unknown) {
  const option: RequestInit = {
    method
  }
  if (data) {
    option.headers = {
      'Content-Type': 'application/json; charset=utf-8'
    }
    option.body = JSON.stringify(data)
  }
  const res = await fetch(url, option)
  const json: T = await res.json()
  return json
}

export function get<T>(url: string) {
  return request<T>('GET', url)
}

export function post<T>(url: string, data?: unknown) {
  return request<T>('POST', url, data)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

列表渲染

注意map遍历数组渲染列表时如果箭头后面有{ } 就要使用return返回

function App() {
  return (
    <div className="App">
      <ul>
        {
          songs.map(（item,index）=> <li key={index}>{item.name}</li>)
        }
      </ul>
    </div>
  )
}
1
2
3
4
5
6
7
8
9
10
11

组件传参

传参的话绑定函数时前面要加箭头函数包裹

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e,msg) => {
    console.log('事件被触发了',e,msg)
  }
  return (
    // 绑定事件
    <button onClick={clickHandler}>click me!</button>
  )
}

// 类组件
class HelloC extends React.Component {
  // 定义事件回调函数
  clickHandler = (e,msg) => {
    console.log('事件被触发了')
  }
  render () {
    return (
      // 绑定事件
      <button onClick={(e) => {this.clickHandler(e,"this is a message")}}>click me!</button>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
      //超链接将不在转跳
    e.preventDefault() 
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <a href="http://www.baidu.com/" onClick={clickHandler}>百度</a>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13

组件状态

• 通过class的实例属性state来初始化

• state的值是一个对象结构，表示一个组件可以有多个数据状态

class Counter extends React.Component {
  // 定义数据
  state = {
    count: 0
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

状态的修改不要直接修改状态的值，而是基于当前状态创建新的状态值

state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
this.setState({
    //简单类型修改
    count: this.state.count + 1
    //数组修改
    list: [...this.state.list, 4],
    //对象修改
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
    //删除(筛选出不为2的值)
    list:this.state.list.filter(item => !==2)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单处理

import React from 'react'

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}


function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

uuid

生成id的包

npm add uuid  //下载包
1

import {v4 as uuid} from 'uuid' //导入
1

id:uuid(),  //给id属性生成一个独一无二的值
1

组件传值

父子组件传值

通过props实现

• props是只读对象（readonly），根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改
• props可以传递任意数据（数字、字符串、布尔值、数组、对象、函数、JSX）

//父传子 通过props关键字传递
import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
      {props.list.map(item => <p key={item}>{item}</p>)}
      {props.user.name}
      {props.child}
      <button onClick={props.getMsg}>触发父组件传来的函数</button>
    </div>
  )
}
// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message',
    list: [1,2,3,4],
    user:{
      age:16,
      name:"cyt"
    },
  
  }
  getMsg = () => {
    console.log('父组件中的函数')
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon
          msg={this.state.message}
          list={this.state.list}
          user={this.state.user}
          getMsg={this.getMsg}
          child={<span>这是父组件传来的span</span>}
           />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

props解构赋值

// 函数式子组件
function FSon(props) {
  console.log(props)
  const {msg,list,user,child,getMsg} = props
  return (
    <div>
      子组件1
      {props.msg}
      {props.list.map(item => <p key={item}>{item}</p>)}
      {props.user.name}
      {props.child}
      <button onClick={props.getMsg}>触发父组件传来的函数</button>
    </div>
  )
}
或者
// 函数式子组件
function FSon({msg,list,user,child,getMsg}) {
  const {msg,list,user,child,getMsg} = props
  return (
    //......
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

子传父

    import React from 'react'
     
     // 子组件
     function Son(props) {
       const {getSonMsg} = props
       return (
         <div>
           <button onClick={() => getSonMsg('这里是来自于子组件的数据')}>click</button>
         </div>
       )
     }
     
     class App extends React.Component {
       //准备一个函数传递给子组件
       getSonMsg = (sonMsg) => {
         console.log(sonMsg);
       }
       render() {
         return (
           <div>
             <div>父组件</div>
             <Son
               getSonMsg={this.getSonMsg}
             />
           </div>
         )
       }
     }
     
     export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

兄弟组件传值

本质是子传父 父再传给另一个子

     import React from 'react'
     
     // 子组件A
     function SonA(props) {
       return (
         <div>
           SonA
           {props.msg}
         </div>
       )
     }
     // 子组件B
     function SonB(props) {
       return (
         <div>
           SonB
           <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
         </div>
       )
     }
     // 父组件
     class App extends React.Component {
       // 父组件提供状态数据
       state = {
         message: 'this is message'
       }
       // 父组件提供修改数据的方法
       changeMsg = (newMsg) => {
         this.setState({
           message: newMsg
         })
       }
     
       render() {
         return (
           <>
             {/* 接收数据的组件 */}
             <SonA msg={this.state.message} />
             {/* 修改数据的组件 */}
             <SonB changeMsg={this.changeMsg} />
           </>
         )
       }
     }
     
     export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

向下层组件传值（子 孙 等）

使用context实现
创建Context对象 导出 Provider 和 Consumer对象

       const { Provider, Consumer } = createContext()
1

使用Provider包裹根组件提供数据

       <Provider value={this.state.message}>
           {/* 根组件 */}
       </Provider>
1
2
3

需要用到数据的组件使用Consumer包裹获取数据

       <Consumer >
           {value => /* 基于 context 值进行渲染*/}
       </Consumer>
1
2
3

使用

     import React, { createContext }  from 'react'
     
     // 1. 创建Context对象 
     const { Provider, Consumer } = createContext()
     
     
     // 3. 消费数据
     function ComC() {
       return (
         <Consumer >
           {value => <div>{value}</div>}
         </Consumer>
       )
     }
     
     function ComA() {
       return (
         <ComC/>
       )
     }
     
     // 2. 提供数据
     class App extends React.Component {
       state = {
         message: 'this is message'
       }
       render() {
         return (
           <Provider value={this.state.message}>
             <div className="app">
               <ComA />
             </div>
           </Provider>
         )
       }
     }
     
     export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

children属性

表示该组件的子节点，只要组件内部有子节点，props中就有该属性，可以传递普通文本，普通标签元素，函数，jsx

import React from 'react'

// 子组件
function Son({children}) {
  return (
    <div>
      {children}
    </div>
  )
}

class App extends React.Component {
  render() {
    return (
      <div>
        <div>父组件</div>
        <Son>
          <div>111111</div>
        </Son>
      </div>
    )
  }
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25