react基础笔记

创建react项目

npx create-react-app xxx

启动项目

npm start || yarn start

基本使用

• 导入react和react-dom
• 创建react元素
• 渲染react元素到页面中

import React from 'react'
import ReactDom from 'react-dom'
const title=React.createElement('h1',null,'hello react')
ReactDom.render(title,document.getElementById('root'))

jsx使用

不需要导入react,创建元素直接写jsx代码就行
注意： 属性名用驼峰命名法,多行用()包裹

• 条件渲染

const isLoding = false
const loadData = () => {
  if (isLoding) {
    return <div>数据加载中.....</div>
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}

const title = <div>条件渲染：{loadData()}</div>

通过三元运算符控制

const isLoding = false
const loadData = () => {
  return isLoding ? (
    <div>数据加载中.....</div>
  ) : (
    <div>数据加载完成，此处显示加载后的数据</div>
  )
}

逻辑与（&&）运算符

const isLoding = false
const loadData = () => {
  return isLoding && <div>加载中...</div>
}

const title = <div>条件渲染：{loadData()}</div>

组件基础

函数组件

首字母大写，必须有返回值

function Hello(){
  return <div>函数组件</div>
}
const Hello=()=> return  <div>函数组件</div>

类组件

首字母大写，render方法，render方法也必须有返回值，React.Component可以继承父类的方法和属性

import {Component} from 'react'
class Hello extends Component{
  render(){
   return <div>Hello class Component</div>
 }
}
ReactDom.render(<Hello/>,root)

有状态的类组件

class Hello extenda Component{
state={
 count:0,
 list:[]
 }
render(){
 return (<div>计数器:{this.state.count}</div>)
} 
}

注册事件
onClick={this.handleClick}

class App extends React.Component {
  handleClick() {
    console.log('点击事件触发')
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
### 事件中的this指像undefint,render中的this指向当前组件

解决方法： 用箭头函数，.bind(this)

setState修改状态

不能直接修改status中的数据状态。

this.setState({count:10}) X
this.setStatus({count: this.state.count+10}) √

受控组件

 handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

非受控组件

// 1 导入 createRef 函数（ 用来创建 ref 对象 ）
import { createRef } from 'react'
//2 调用 createRef 函数来创建一个 ref 对象
txtRef = createRef()
//3 将创建好的 ref 对象，设置为 input 标签的 ref 属性值
<input ref={this.txtRef} />
//4 获取文本框的值：
 console.log(this.txtRef.current.value)

组件通讯

函数组件

function Hello (props){
  return <div>接收数据：{props.name}-{props.age}</div>
}
<Hello name='jake' age={19}>

类组件

class Hello extends Component{
 render(){
   return (<div>接受到的数据：{this.props.age}</div>)
 }
}
<Hello name='jack' age={19}>

子传父

import React from 'react'
import Hello from './Hello.jsx'
class App extends React.Component {
  state = {
    text: "你个老六",
    nameStart: "胡歌",
  }
  changeName = (name) => {
    this.setState({
      nameStart: name,
    })
  }
  render() {
    return (
      <div>
        <h1>父组件</h1>
        <Hello text={this.state.text} name={this.state.nameStart} changeName={this.changeName} />
      </div>

    );
  }

}

export default App;

import { Component } from 'react'

class Hello extends Component {
  changeName = () => {
    this.props.changeName('彭于晏')
  }
  render() {
    return (
      <div>
        <div>
          我是组件:{this.props.text}-{this.props.name}
        </div>
        <button onClick={this.changeName}>按钮</button>
      </div>
    )
  }
}
export default Hello

兄弟组件

状态提升
把state写在父组件中进行兄弟组件的共用。

跨级组件通讯

1.//导入创建context的函数
import {createContext} from 'react'
2.创建Context对象
const {Provider, Consumer} =createContext()
3.使用Provider 组件包裹应用，value属性提供要共享的数据
<Provider value="blue">
  <div className="App">
    <Node /> 
  </div>
</Provider>
4.  用Consumer组件接受要共享的数据
<Consumer>
  {color => <span>data参数表示接收到的数据 -- {color}</span>}
</Consumer>

setState进阶

• 推荐：使用 setState((prevState) => {}) 语法

• 参数 prevState：表示上一次 setState 更新后的状态

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

react hooks
为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能

1.useState使用

const Count = () => {
  // 解构：
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>计数器：{state}</h1>
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  )
}

//副作用

useEffect

useEffect(function(),参数)
- 当第二有参数时：只有当参数项改变了，才执行effect.
- useEffect 的第二个参数，还可以是一个**空数组（[]）**，表示只在组件第一次渲染后执行 effect
- 使用场景：1 事件绑定  2 发送请求获取数据 等

- 1.第一次渲染执行，每此组件重新渲染都会再次执行。
useEffect(()=>{})

• 2.只在组件第一次渲染时执行
  useEffect(()=>{},[])

• 3.第一次渲染会执行，当count变化会再次执行。
  useEffect(()=>{},[count])

-4.组件卸载时执行
useEffect(()=>{
return ()=>{}
})
组件卸载时执行，count变化时执行
useEffect(()=>{
return ()=>{}
},[count])

effect是同步函数
语法：

useEffect(()=>{
const loadData=async ()=>{
const res=await axios.get('http://xxx')
}
loadData()
return ()=>{}
},[])