// 01有且只有一个根节点 // 02{}写js // 03{/**}注释
1.JXS语法
//从react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React,因为react里有一种语法叫jsx,要写SX,就必须引入React import React from 'react'; //导入组件 import App from './all/index1' import { createRoot } from 'react-dom/client'; const rootElement = document.getElementById('root'); const root = createRoot(rootElement); // 创建一个根 root.render(<App />); // 将组件渲染到页面上 // RealtDow可以帮助我们把 React组件渲染到页面上去,没有其它的作用了。它是从、react-dom 中引入的,而不是从 react引入。 //JSx一使用react构造组件,bable进行编译—> JavaScript对象一ReactDOM.render( ->DOM元素一>插入页面
1.1文本渲染,条件渲染,数组列表的渲染
function App(params) { const text1 = '文本渲染' const text2 = '<strong style="color:red;">文本渲染</strong>' const isstage = true const age = 20 const arr1 = [<span key="1">1</span>, <span key="2">2</span>, <span key="3">3</span>, <span key="4">4</span>] const arr2 = ['js', 'vue2', 'vue3', 'react'] return ( <div> <h3 className='h'>文本渲染</h3> <p>{text1}</p> <p dangerouslySetInnerHTML={{ __html: text2 }}></p> <h3 className='h'>条件渲染</h3> {/*{条件?<p>true展示</p>:<p>false展示</p>}*/} {isstage ? <p>主线模式</p> : <p>游客模式</p>} {/*{条件?<p>true展示</p>:<p>false展示</p>}*/} {age > 18 && <p>网吧反应呢</p>} <h3 className='h'>数组列表的渲染</h3> {/* 数组会自动展开*/} {arr1} {/*map从现有的数组,映射出新的数组*/} {/*{arr.map((item,index)=><p key={index}>{item}</p>)}*/} {arr2.map((item, index) => <p key={index}>{item}</p>)} </div> ) } export default App
2.组件
class类组件
//imrc 导入React 和React.Component 类型 import React, { Component } from 'react' //创建并导出类组件 export default class App extends Component { render() { return (<div>莫峰阁</div>) } }
函数组件
function App(){ return ( <div>hello functional component<div>1111</div> ) } export default App
组件的嵌套
function Swiper(){ return <div>swiper</div> } const Tabbar =()=>{return <div>tabbar</div>} export default cLass App extends Component { render() { return ( <div> <Swiper></Swiper> <Tabbar></Tabbar> </div> ) } }
3.组件的样式
// class要用className表达 // 样式推荐使用对象方式驼峰写法 import React, { Component } from 'react' import './index1.css' //2:也可以从外部引入 export default class App extends Component { render() { var style = { backgroundColor: 'yellow' } return ( <dic> <div> <span>{10 + 20}-{myname}</span> {/*{}为jsx的语法模板*/} <10>20? 'aaa':' bbb'> {/*三元运算符*/} </div> <div> {/* React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体*/} {/*1:行内样式*/} <span style={{ backgroundColor: 'red' }}>1111</span> <span style={style}>1111</span> <span className='one'>1111</span> </div> ) } }
4.事件绑定
React并不会真正的绑定事件到每一个具体《》的元素上,而是采用事件代理的模式
import React, { Component } from 'react' export default class App extends Component { show(str='111'){ console.log(this); alert(str) } render() { return ( <button onClick={()=>{console.log(this);}}> add1</button> {/*这里打印的为组件App实例*/} <button onClick={this.add}> add2</button> {/*345*/} <button onClick={()=>{this.add()}}> add3</button> {/*这里直接无须点击直接打印345,并且再次点击也无效果*/} <h3>事件传参</h3> <button onClick={this.show.bind(this,'666')}>点击</button> <button onClick={()=>{this.show('777')}}>点击</button> <h3>事件相应</h3> <button onClick={this.show}>点击</button> <button onClick={()=>{this.show()}}>点击</button> ) } add(){console.log(345)} }
5.Ref的应用
1给标签设置ref="mytext" 通过这个获取this.refs.mytext , ref可以获取到应用的真实domr
myref = React.createRef() render() { return ( <div> <input ref="mytext" /> <button οnclick={ ()=>{console.log("click1" , this.refs.mytext.value)} }> add1 </button> {/*这里this.refs.mytext获取的是真实的dom*/} </div> ) }
2给组件设置ref="username" 通过这个获取this.refs.username ,ref可以获取到组件对象
6.组件的数据挂载方式
1、状态(state)
状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是说由组件自己维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理)
(1)定义state
第一种方式
import React,{ Component } from 'react' export default cLass App extends Component { stata = { text:'收藏'} render() { return ( <div> <h1>欢迎来到react开发</h1> <button οnclick={()=>{this.setstate({text:'取消收藏'})}> {this.state.text} </button> </div> ) } } {/*this.state是纯js对象,在vue中,data属性是利用object.defineProperty 处理过的,更改data的数据的时候会触发数据的getter和setter,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法setstate。 */}
第二中方法
import React,{ Component } from 'react' export default cLass App extends Component { constructor(){ super()//继承组件类的所有属性 this.state = {text:"收藏"} } render() { return ( <div> <h1>欢迎来到react开发</h1> <button οnclick={()=>{this.setstate({text:'取消收藏'})}> {this.state.text} </button> </div> ) } }
7.循环渲染
export default class App extends Component { state = {list:[ "1111", "2222","3333"]} render(){ return ( <div> <ul>{this.state.list.map(item=><li key={item}>{item}</li>)}</ul> </div> ) } }
9.表单双向绑定
//imrc导入React 和React.Component 类型 import React, { Component } from 'react' //cc 创建一个App的类继承Component class App extends Component { state = { num:5 } updataNum = (val=1)=>{ this.setState({num:this.state.num+val}) } render() { return ( <div> <h3>状态state</h3> <p>{this.state.num}</p> <button onClick={()=>this.updataNum(2)}>+2</button> <button onClick={()=>this.updataNum(-2)}>-2</button> <h3>表单双向绑定</h3> <input value={this.state.num} onChange={e=>this.setState({num:e.target.value*1})}/> </div> ); } } export default App;
10,组件
1,父组件
import Counter from './component/Counter' import React, { Component } from "react"; class App extends Component { constructor(props) { super(props) } state = { fonSize: 12, width: 200} onChange1 = e => { this.setState({ fonSize: e }) } onChange2 = e => { this.setState({ width: e }) } render() { return ( <div> <Counter value={this.state.fonSize} onChange={this.onChange1} /> <Counter value={this.state.width} onChange={this.onChange2} setup={5}/> <div style={{ fontSize: this.state.fonSize }}> <span>文字大小</span> </div> <div style={{ width: this.state.width, border: '1px solid red' }}> <span>宽度</span> </div> </div> ) } } export default App;
2,子组件
//用prpps来接收 import React,{Component} from "react"; class Counter extends Component{ //constructor构造函数 Super调用父类的构造函数 constructor(props){ super(props) } setNum(n){ this.setState({num:n},()=>{ this.props.onChange(this.state.num) }) } state = { num :this.props.value, max: 800, min: 0 ,all:5} render(){ return( <div> <button onClick={()=>{if(this.state.num>this.state.min){this.setNum(this.state.num-this.props.setup)}}}>-</button> <input value={this.state.num} onChange={(e)=>{this.setNum(Number(e.target.value))}}/> <button onClick={()=>{if(this.state.num<this.state.max){this.setNum(this.state.num+this.props.setup)}}}>+</button> </div> ) } } export default Counter; //props单词固定写法,父组件传递给子组件的参数 //props里面的属性和方法都必须是只读(不可以更改其值) //定义默认props //父子传参:props //子父传参:子组件执行props的回调函数实现 Counter.defaultProps ={ value:1, max:Infinity, min:-Infinity, setup:1 } //默认props Counter.defaultProps ={} //Infinity无限
11生命周期
import List from './component/Life' import React, { Component } from "react"; class App extends Component { constructor(props) { super(props) console.log('第一阶段-创建阶段',); } state = { fonSize: 12, width: 200 } static getDerivedStateFromProps(nextProps, prevState) { console.log('第二阶段-创建阶段,getDerivedStateFromProps'); console.log(nextProps, prevState); console.log('第一阶段-更新阶段,getDerivedStateFromProps'); return prevState } shouldComponentUpdate(){ console.log('第二阶段-更新阶段,shouldComponentUpdate'); } render() { console.log('第三阶段-创建阶段,render'); console.log('第三阶段-更新阶段,render'); return ( <div> <h1>生命周期</h1> <List value={this.state.fonSize} /> </div> ) } componentDidMount() { console.log('第四阶段-创建阶段,componentDidMount'); } getSnapshotBeforeUpdate(prevProps,prevState){ console.log('第四阶段-更新阶段,getSnapshotBeforeUpdate'); return {name:'莫',age:15} } componentDidUpdate(snap){ console.log('第五阶段-更新阶段,componentDidUpdate,',snap); } } export default App;
创建阶段
01 counstuctor构造函数作用:初始化state
02 static getDerivedStateFromProps(nextProps,prevState)props更新nextProps最新的props,prevState之前State需要返回最新的State,父组件props更新组件的state作用:监听props变化
03 render渲染创建虚拟dom 作用:
04 componentDidMount组件挂载完毕作用: ajax,定时器,事件监听,操作dom(需要背诵)
更新阶段
01 static getDerivedStateFromProps父组件props更新组件的state 作用:监听props变化
02 shouldComponentUpdate(nextProps, nextState) 组件是否需委更新,返回true更新,返回false不更新作用:优化〔需要背诵)
03 render
04 getsnapshotBeforeUpdate(prevProps, prevState)更新前获取快照
05 componentDidUpdate组件已经更新完毕
卸载阶段
componentWillUnmount 组件将要卸载 作用:移除事件监听,停止定时器