react第一天
1. index.js-入口文件
import React from "react"
import ReactDOM from "react-dom"
import App from "../App.js"
ReactDOM.render(<App/>,document.getElementById("root"))
2. app.js -根组件
这里以类组件为例
import React from "react"
// 需要暴露 才能在其他地方使用
export default class App extends React.Component{
// render 函数必须有 固定写法
render(){
return (
<div>根组件</div>
)
}
}
3. JSX 语法
jsx 语法是什么，就是 js+xml；大白话就是js和html的混写，由babel进行编译成为浏览器认识的代码。
import React from "react"
// 需要暴露 才能在其他地方使用
export default class Demo extends React.Component{
// render 函数必须有 固定写法
state={
num:0
}
render(){
// return 返回的代码中演示 jsx
return (
<div>
<h2>根组件</h2>
{/*
这个是react中注释方式
jsx 是 js和html元素的混写，在需要使用js变量的时候，直接使用大括号，在大括号中填写js变量即可
属性值，内容，事件都可以，后面慢慢会演示的。
*/}
<p>{this.state.num}</p>
</div>
)
}
}
4. react 中的样式设置
.box{
height:"200px";
width:"200px";
background:"green"
}
import React from "react"
// 引入 css 文件
import "./app.css"
export default class App extends React.Component{
// render 函数必须有 固定写法
state={
styObj:{
color:"red",
fontSize:"100px"
}
}
render(){
return (
{/* 第一种写法 */}
<div style={this.state.styObj}>根组件</div>
{/* 第二种写法 直接传入一个对象 这里不要和vue的双括号插值语法混淆了 */}
<div style={{color:"red",fontSize:"100px"}}>根组件</div>
{/*
这里如果使用 class 的话 会和js的关键字calss 冲突 所以请使用 className
label 标签的for 也会有这样的问题
*/}
<div className="box"></div>
<label htmlFor="uname">用户名：<input id="uname" type="text"/> </label>
)
}
}
5. fragment 组件
React.Fragment 组件可以作为根标签使用，而且不会改变dom树测层级解构。
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<React.Fragment>
<div>App1</div>
<div>App2</div>
<div>App3</div>
</React.Fragment>
);
}
}
简写：
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<>
<div>App1</div>
<div>App2</div>
<div>App3</div>
</>
);
}
}
6. 列表渲染
import React, { Component } from "react";
export default class App extends Component {
state = {
list: ["aaa", "bbbb", "cccc", "dddddddd"],
};
render() {
return (
<div>
<ul>
{/* 使用map 函数 将数组加工成为 新的数组 那么 就可以解析了 */}
{this.state.list.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
}
另一种写法：将数组列表渲染提出来
import React, { Component } from "react";
export default class App extends Component {
state = {
list: ["aaa", "bbbb", "cccc", "dddddddd"],
};
render() {
/* 将列表渲染的数组提出来 */
const newlist = this.state.list.map((item) => <li key={item}>{item}</li>);
return (
<div>
{/* 在这儿加入列表渲染的数组 */}
<ul>{newlist}</ul>
</div>
);
}
}
7. 条件渲染
条件渲染1-三元运算
// 使用三元运算符
import React, { Component } from "react";
export default class App extends Component {
render() {
const age = 10;
return <div>{age >= 18 ? <h3>成年</h3> : <h3>未成年</h3>}</div>;
}
}
条件渲染2-与运算
// 使用 与 运算符
import React, { Component } from "react";
export default class App extends Component {
render() {
const age = 10;
// 满足条件后面的代码才会被执行
return <div>{age >= 18 && <h3>成年</h3>}</div>;
}
}
条件渲染3-抽离出来作为一个函数
// 逻辑太复杂的话，将其抽离出来，封装一个函数
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<>
<div>{this.getRes(1)}</div>
<div>{this.getRes(0)}</div>
</>
);
}
getRes(flag) {
if (flag === 1) {
return <div>hello {flag}</div>;
} else {
return <div>world {flag}</div>;
}
}
}
8. 组件分类以及 props
组件有一个 props 属性用来接收父组件传递过来的值，通过this.props.属性名 来调用。x下面演示的是类组件的父传子的props的用法
父组件代码
import React from "react"
// 引入子组件
import Son from "./Son"
class App extends from React.Component{
state={
num:0
}
render(){
return(
<div>
<Son value={this.state.num}/>
</div>
)
}
}
子组件代码
import React from "react"
class Son extends from React.Component{
render(){
return(
<div>
{this.props.value}
</div>
)
}
}
9. 类组件的state
state: 叫做状态，是用来盛放数据的。
一般写法
import React, { Component } from "react";
export default class App extends Component {
// 定义state的第一种方式
// 这种方式就是构造器的方式
constructor() {
super(); // 因为继承了父类 所以需要使用super 函数
this.state = {
num: 0,
uname: "zrs",
};
}
render() {
return (
<div>
{/* 使用状态 */}
{this.state.num}-{this.state.uname}
</div>
);
}
}
简化写法(推荐)
import React, { Component } from "react";
export default class App extends Component {
// 定义状态的第二种方式
state = {
num: 0,
uname: "zrs",
};
render() {
return (
<div>
{/* 使用方式没有任何变化 */}
{this.state.num}-{this.state.uname}
</div>
);
}
}
10. react 中的事件 以及 三个改变this的函数
绑定事件的写法一
直接再大括号中书写一个箭头函数，在函数中直接书写逻辑代码；缺点：逻辑代码太多会导致维护困难
import React, { Component } from "react";
export default class App extends Component {
state = {
uname: "zrs",
};
render() {
return (
<div>
<button
onClick={() => {
let uname = "zzr";
// 这里的 this 指向的是 实例对象
console.log("this:", this);
// 改变 state 的值 请使用 setState() 这个函数在修改值之后，才能触发render函数重新执行
this.setState({
uname,
});
}}
>
change
</button>
<div>{this.state.uname}</div>
</div>
);
}
}
绑定事件的写法二
import React, { Component } from "react";
export default class App extends Component {
state = {
uname: "zrs",
};
// 将事件处理函数写在 外面 但是这种写法会有一个问题 就是需要修正this ，如果不修正this，this指向的是undefined
// 这个不是react留的坑，是js的坑，详情自行搜索
changeUname() {
let uname = "zzr";
console.log("this:", this);
this.setState({
uname,
});
}
render() {
return (
<div>
{/* 使用bind 函数修正 this */}
<button onClick={this.changeUname.bind(this)}>change</button>
<div>{this.state.uname}</div>
</div>
);
}
}
在构造器中修正this
import React, { Component } from "react";
export default class App extends Component {
constructor(){
super()
// 在构造器中修正this
this.changeUname=this.changeUname.bind(this)
}
state = {
uname: "zrs",
};
changeUname() {
let uname = "zzr";
console.log("this:", this);
this.setState({
uname,
});
}
render() {
return (
<div>
<button onClick={ this.changeUname }>change</button>
<div>{this.state.uname}</div>
</div>
);
}
}
绑定事件的写法三-箭头函数
import React, { Component } from "react";
export default class App extends Component {
state = {
uname: "zrs",
};
// 在这里写成箭头函数即可，因为箭头函数的this指向的是应用上下文
changeUname = () => {
let uname = "zzr";
console.log("this:", this);
this.setState({
uname,
});
};
render() {
return (
<div>
<button onClick={this.changeUname}>change</button>
<div>{this.state.uname}</div>
</div>
);
}
}
绑定事件的写法四
import React, { Component } from "react";
export default class App extends Component {
state = {
uname: "zrs",
};
changeUname = () => {
let uname = "zzr";
console.log("this:", this);
this.setState({
uname,
});
};
render() {
return (
<div>
{/* 第四种写法：给事件一个处理函数，在处理函数中调用处理逻辑的函数 所以这里添加了小括号 */}
<button onClick={() => {this.changeUname()}} >
change
</button>
<div>{this.state.uname}</div>
</div>
);
}
}
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
