React学习笔记

时间：2023-03-29 12:45:12 HTML

1.JSX和模板语法创建一个React项目：在React中实现循环遍历importReactfrom'react'importReactDOMfrom'react-dom'//JSX==JavaScript+xml//loopbindingusemapconstarr=[1,2,3]//DOM对象constulEle=arr.map((item,index)=>{item})//ReactDOM.render(DOMObj,document.querySelector('#root'))ReactDOM.render(

{ulEle},document.querySelector('#root'))2.React2.1中创建组件的两种方式函数组件本质上是一个函数//props携带参数functionWelcome(props){return

hello,{props.name}

}ReactDOM.render(,document.querySelector('#root'))2.2类components//1.必须继承React.ComponentclassAppextendsReact.Component{//2.必须有渲染函数render(){//3.必须返回DOM元素return

App,{this.props.name}

}}ReactDOM.render(,document.querySelector('#root'))3.React组件拆分创建一个普通组件：//App.jsimportReact,{Component}来自'react'//App=>MyBtnclassMyBtnextendsComponent{render(){return}}classAppextendsComponent{constructor(props){super(props)//遵循单向数据流this.user={name:'李诗瑶',content:'这是我的react组件',date:newDate().toLocaleDateString()}}render(){return(

hello,{this.props.name}

{/*用户信息*/}name:{this.user.name}

{/*内容*/}

common:{this.user.content}

{/*time*/}

date:{this.user.date}

div>

)}}exportdefaultApp调用App组件importReactfrom'react'importReactDOMfrom'react-dom'importAppfrom'./App'ReactDOM.render(,文档ment.querySelector('#root'))4.从子到父定义父组件中改变数据的方法传递给子组件，访问子组件中的方法修改父组件的数据，注意这一点。importReact,{Component}from'react'importReactDOMfrom'react-dom'//子组件类ChildComextendsComponent{constructor(props){super(props)this.state={val:''}this.handlerClick=this.handlerClick.bind(this)this.handlerChange=this.handlerChange.bind(this)}handlerChange(event){this.setState({val:event.target.value})}handlerClick(){if(this.state.val){//调用父组件的方法this.props.addHandler(this.state.val)//清空输入框this.setState({val:''})}}render(){return(

添加{this.props.menus.map((item,index)=>{return{item}

})}

)}}//父组件类AppextendsComponent{constructor(props){super(props)this.state={menus:['烤腰子','香辣炸鸡','炸黄鱼']}}//一定要使用箭头函数addHandler=(val)=>{this.state.menus.push(val)//更新视图=>renderthis.setState({menus:this.state.menus})}render(){//修改状态后，会再次调用renderreturn(

)}}ReactDOM.render(,document.querySelector('#root'))5.Hook组件Hook类似于Vue3importReact,{useEffect,useState}from'react'import{Table,Tag,Space,Button}from'antd'functionExample1(){//声明一个变量count//声明一个函数修改状态//初始化状态constcolumns=[{title:'Name',dataIndex:'name',key:'name',render:(text)=>{text}},{title:'年龄',dataIndex:'年龄',key:'age'},{title:'Address',dataIndex:'address',key:'address'},{title:'Tags',key:'tags',dataIndex:'tags',render:(tags)=>(<>{tags.map((tag)=>{letcolor=tag.length>5?'geekblue':'green'if(tag==='loser'){color='volcano'}return({tag.toUpperCase()})})})},{title:'Action',key:'action',渲染:(text,record)=>(邀请{record.name}删除)}]const[data,setData]=useState([])constgetData=()=>{setData([{key:'1',name:'JohnBrown',age:32,address:'纽约第一湖公园',tags:['nice','developer']}])}return(点我初始化数据

)}functionExample2(){const[count,setCount]=useState(0)//更新和挂载时触发lettimer=setInterval(()=>setCount(count+1),2400)useEffect(()=>{document.title='Iclicked'+count+'times'return()=>{clearInterval(timer)}})return(

{count}
{setCount(count+1)}}>添加

)}functionApp(){return(

React学习笔记

hello,{props.name}

App,{this.props.name}

hello,{this.props.name}

{count}{setCount(count+1)}}>添加

{count}
{setCount(count+1)}}>添加