PS:以上是webpack创建react项目方式 本人也只用过webpack其他方式暂时先不做。
英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/
其优点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效(优秀的Diffing算法)
还是不讲废话了 直接来开始react的使用
学习react的时候这个是必看的
JSX全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement方法的语法糖
作用: 用来简化创建虚拟DOM
写法:var ele =
Hello JSX!
注意1:它不是字符串, 也不是HTML/XML标签
注意2:它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理
组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
import React,{Component} from "react";
export default class StateTest extends Component{
constructor(props){
super(props)
this.state={
my:'5555'
}
}
render(){
const abc = this.state //state的
console.log(abc); //{'my:5555'}
return(
<div>我是state组件</div>
)
}
}
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined,如何解决?
状态数据,不能直接修改或更新
import React,{Component} from "react";
export default class Props extends Component{
constructor(props){
super(props)
console.log(props)
}
render(){
return(
<div>
真的挺牛逼的
</div>
)
}
}
<input ref="input1"/>
<input ref={(c)=>{this.input1 = c}}
import React, { Component } from "react";
export default class InputRef extends Component {
constructor(props) {
super(props)
this.inputdiv = React.createRef()
}
getvalue() {
console.log(this.inputdiv.current.value) //能获取input中的值
}
render() {
return (
<form>
<input type='text' ref={this.inputdiv}></input>
<button onClick={() => this.getvalue()}>获取</button>
</form>
)
}
}
事件处理
import React, { Component } from "react";
export default class Ref extends Component{
constructor(props){
super(props)
this.mydiv = React.createRef()
this.inputidv = React.createRef()
}
componentDidMount(){
console.log(this.mydiv.current)
}
render(){
return(
<div ref={this.mydiv}>
995
</div>
)
}
}
this.my.current能获取Dom
// app.js
import React, { Component } from "react";
import News from './test';
export default class News extends React.Component {
render() {
return (
<News id='gcy' /> //id是传递的参数名 gcy是参数值
)
}
}
子组件 可以使用this.props接受父组件的传参
// index.jsx
import React, { Component } from "react";
export default class News extends Component {
console.log(this.props.id) //输出结果为gcy
render() {
return (
<div>News
<span>{this.props.id}</span>
</div>
)
}
}
来看看界面
子传父的案例
子组件 通过使用this.props.自己的事件名(‘参数’)
import React from 'react'
export default class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
message: '你好啊'
}
}
dianji = () => {
this.setState({
message: '好的吧'
})
}
sends = () => {
this.props.OnMy('masssss'); // 注意这里通过this.props发送
}
render() {
return (
<div>
<p onClick={this.dianji.bind(this)}>{this.state.message}</p>
<h5 onClick={this.sends.bind(this)}>子传父</h5> //这里是子传父的事件
</div>
)
}
}
父组件
import React, { Component } from "react";
import Test from './test/index2'
export default class App extends React.Component {
my =(data)=>{
console.log(data) // 这里的data就是接收的值了
}
render() {
return (
<Test OnMy={this.my} /> //通过OnMy接收
)
}
}
看下输出结果
我来出一个比较连贯的题目,一个父组件和两个子组件,子组件1传递参数名id过去,id的值为1,父组件接收后再通过点击事件传递给子组件2,这里就不贴代码了,新手可以尝试下,做不出来可以私信我要代码或者思路。
import React, { Component } from "react";
import './from.css'
export default class From extends Component {
constructor(props) {
super(props);
this.state = { value: '', value2: '' };
this.handleSubmit = this.handleSubmit.bind(this); //this指向问题
this.handleChangetewo = this.handleChangetewo.bind(this) //this指向问题
}
handleChange(event) {
this.setState({ value: event.target.value }); //event为Input中的值
}
handleChangetewo(event) {
this.setState({ value2: event.target.value }) //event为Input中的值
}
handleSubmit(event) {
alert('提交的名字: ' + this.state.value + '密码是' + this.state.value2);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}> //提交的点击事件
<label>
名字:
<textarea type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
密码:
<input type='password' value={this.state.value2} onChange={this.handleChangetewo} />
</label>
<input type="submit" value="提交" />
</form>
);
}
}
import React, { Component } from "react";
export default class Select extends Component {
constructor(props) {
super(props)
this.state = {
data: [
'213', '555', '214', '你', '西瓜'
],
value: '213'
}
}
changevalue(event) {
this.setState({ value: event.target.value }) //value值为设置的值
}
handleSubmit(event) {
alert(this.state.value)
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<select value={this.state.data.value} onChange={this.changevalue.bind(this)}>
{
this.state.data.map((item, index) => {
return <option key={index}>{item}</option>
})
}
</select>
<input type="submit" value="提交" />
</form>
)
}
}
来具体看下代码吧
import React, { Component } from "react";
import Child1 from "./child";
import Child2 from "./child2";
export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
mes: ''
}
}
componentDidMount() {
this.timer = setInterval(() => {
console.log('初次渲染') //最好设置定时器
}, 1000)
}
MyEvent = (data) => {
this.setState({
mes: data
})
}
render() {
return (
<div>
<span>我是把把</span>
<Child1 onMyEvent={this.MyEvent} />
<Child2 mymes={this.state.mes} />
</div>
)
}
}
import React, { Component } from "react";
import Child1 from "./child";
import Child2 from "./child2";
export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
mes: ''
}
}
componentDidUpdate() {
console.log('更新后')
//当组件更新后,可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求。(例如,当 props 未发生变化时,则不会执行网络请求)。
}
MyEvent = (data) => {
this.setState({
mes: data
})
}
render() {
return (
<div>
<span>我是把把</span>
<Child1 onMyEvent={this.MyEvent} />
<Child2 mymes={this.state.mes} />
</div>
)
}
}
通过点击这个按钮传给child2值
看一下输出结果
页面进行了render的重绘所以触发了componentDidUpdate()生命周期
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
componentWillUnmount() {
console.log('我马上去shop家里');
}
render() {
return (
<div>你好我是home
<Link to='/shop'>我要去shop家里看望冯昕</Link>
</div>
)
}
}
点击link后
来看一下输出结果
这个时候home界面跳到了shop界面 完成了页面的卸载
首先是最基本的安装
npm
npm install react-router-dom@6
yarn
yarn add react-router-dom@6
在index.jsx中的基本配置
import React from "react";
import ReactDOM from "react-dom";
import Router from "./router";
import "./index";
ReactDOM.render(<Router />, document.getElementById("root"));
在router中index.jsx配置
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../test/home";
import Shop from "../test/shop";
export default function Router() {
return (
<BrowserRouter>
{/* 使用 Routes 替换 Switch */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='/shop' element={<Shop />} />
</Routes>
</BrowserRouter>
);
}
这样路由最基本的配置就有了 url中 http://localhost:3000就是home界面 http://localhost:3000/shop就是shop界面了
在router.jsx中这样配置
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../test/home";
import Shop from "../test/shop";
import Shui from "../test/shui";
import Hua from '../test/hua'
export default function Router() {
return (
<BrowserRouter>
{/* 使用 Routes 替换 Switch */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='shop' element={<Shop />} > //需要用Router包裹子路由
<Route path='shui' element={<Shui />} />
<Route path='hua' element={<Hua />} />
</Route>
</Routes>
</BrowserRouter>
);
}
父路由中配置shop.jsx 切记使用Outlet 不然界面是渲染不出来的
import React, { Component } from 'react';
import { Outlet } from 'react-router-dom'
export default class Shop extends Component {
render() {
return (
<div>你好我是shop
<Outlet /> //需要Outlet在父路由中配置
</div>
)
}
}
link跳转
现在有home路由以及shop路由,home.jsx中配置link跳转
import React, { Component } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
componentWillUnmount() {
console.log('我马上去shop家里');
}
render() {
return (
<div>你好我是home
<Link to='/shop'>我要去shop家里</Link>
</div>
)
}
}
useNavigate跳转
注意:useNavigate不能使用在类组件中使用
import React from "react";
import { useNavigate } from "react-router-dom";
export default function Lei() {
const navigate = useNavigate();
const handleClickToHome = () => {
navigate("/shop");
};
return (
<div>
<h2>我是类</h2>
<button onClick={handleClickToHome}>去购物了</button>
</div>
);
}
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../test/home";
import Shop from "../test/shop";
import Shui from "../test/shui";
import Hua from '../test/hua'
import Lei from "../test/lie";
import Shui1 from "../test/shui1";
import Me from "../test/Me";
import Our from "../test/our";
export default function Router() {
return (
<BrowserRouter>
{/* 使用 Routes 替换 Switch */}
<Routes>
<Route path='/' element={<Home />} />
<Route path='shop' element={<Shop />} >
<Route path='shui/:id' element={<Shui />} />
<Route path='hua' element={<Hua />} />
</Route>
<Route path='/lei' element={<Lei />}></Route>
<Route path='/me/:id' element={<Me />}></Route> //这里me是主角
<Route path='/our' element={<Our />}></Route>
</Routes>
</BrowserRouter>
);
}
跳转路由的配置
import React, { Component } from 'react';
import { Link } from "react-router-dom";
export default class Shui extends Component {
constructor(){
super()
this.state={
over:[{
id:1,
name:'小明'
},{
id:2,
name:'小绿'
}],
oo:55
}
}
render() {
console.log(this.props)
return (
<div>
{
this.state.over.map((item,index)=>{
return <p key={item.id}><Link to={{pathname:`/me/${this.state.oo}`}}> {item.name}</Link></p>
})
}
</div>
)
}
}
路由的接收配置
import React, { Component } from 'react';
import { useParams,useSearchParams } from "react-router-dom";
export default function Me() {
const par = useParams()
const pars = useSearchParams()
console.log(pars); //其实是个对象
console.log(par); //{id:'55'}
return (
<div>555ME</div>
)
}
看一下输出结果吧