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)
}
列表渲染
注意map遍历数组渲染列表时如果箭头后面有{ } 就要使用return返回
function App() {
return (
<div className="App">
<ul>
{
songs.map(（item,index）=> <li key={index}>{item.name}</li>)
}
</ul>
</div>
)
}
组件传参
传参的话绑定函数时前面要加箭头函数包裹
// 函数组件
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>
)
}
}
// 函数组件
function HelloFn () {
// 定义事件回调函数
const clickHandler = (e) => {
//超链接将不在转跳
e.preventDefault()
console.log('事件被触发了', e)
}
return (
// 绑定事件
<a href="http://www.baidu.com/" onClick={clickHandler}>百度</a>
)
}
组件状态
-
通过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>
}
}
状态的修改不要直接修改状态的值，而是基于当前状态创建新的状态值
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)
})
表单处理
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
uuid
生成id的包
npm add uuid //下载包
import {v4 as uuid} from 'uuid' //导入
id:uuid(), //给id属性生成一个独一无二的值
组件传值
父子组件传值
通过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
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 (
//......
)
}
子传父
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
兄弟组件传值
本质是子传父 父再传给另一个子
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
向下层组件传值（子 孙 等）
使用context实现
创建Context对象 导出 Provider 和 Consumer对象
const { Provider, Consumer } = createContext()
使用Provider包裹根组件提供数据
<Provider value={this.state.message}>
{/* 根组件 */}
</Provider>
需要用到数据的组件使用Consumer包裹获取数据
<Consumer >
{value => /* 基于 context 值进行渲染*/}
</Consumer>
使用
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
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
