搭建环境
1、构建项目
1.1、react+ts
yarn create react-app 项目名称 --template typescript
1.2、react
yarn create react-app 项目名称
然后进入项目并启动
cd 项目名称/
yarn start
运行npm run eject运行报错,可以这样配置
git init
git add .
git commit -m 'init'
npm run eject
创建组件的两种形式
函数创建
class创建
实际上是，构造函数+原型 实现继承
import * as React from "react";
class SonB extends React.Component {
render() {
return <div>在sonb组件中展示数据：{this.props.mess}</div>;
}
}
export default SonB;
pureComponent
接收数据 props
父组件传值子组件
// 父组件
const person = {
name: "peng",
age: 20,
};
// 可用展开运算符 ...传递对象
function App() {
return (
<div>
{/* <Hello name={person.name} age={person.age}></Hello> */}
<Hello {...person}></Hello>
</div>
);
}
// 子组件
constructor(props) {
console.log("初始化阶段");
console.log(props);
// 初始化props
super(props);
}
子组件传父组件
子组件通过调用父组件传递到子组件的方法向父组件传递消息的
// 子组件
class Son extends React.Component {
// 构造方法
constructor() {
super();
this.state = {
inputValue: "",
};
}
// 按钮点击事件
handleClick() {
// alert("ok！");
// 通过props获取父组件的getdata方法，传递inputValue值进去
this.props.getdata(this.state.inputValue);
}
// 输入框事件，给this.state赋值
handleChange(e) {
this.setState({
inputValue: e.target.value,
});
}
render() {
return (
<div>
<input onChange={this.handleChange.bind(this)}></input>
<button onClick={this.handleClick.bind(this)}>点击获取数据</button>
</div>
);
}
}
export default Son;
//父组件
class DashBoard extends React.Component {
constructor() {
super();
this.state = {
mess: "",
};
}
// 用于接收子组件的传值，参数为子组件传递过来的值
getDatas(msg) {
this.setState({
mess: msg,
});
}
render() {
return (
<div>
<Son getdata={this.getDatas.bind(this)}></Son>
<div>展示数据：{this.state.mess}</div>
</div>
);
}
}
export default DashBoard;
兄弟组件传值
- 兄弟组件传值,需要通过父组件做中转，组件1->传值->父组件->传值->组件2
- 实际上，可以理解为是子组件传值给父组件，父组件在传值给子组件
// 子组件1
class Son extends React.Component {
// 按钮点击事件
handleClick() {
// alert("ok！");
// 通过props获取父组件的getdata方法，传递inputValue值进去
this.props.data("hello...React...");
}
render() {
return (
<div>
<button onClick={this.handleClick.bind(this)}>son点击获取数据</button>
</div>
);
}
}
export default Son;
// 父组件
class DashBoard extends React.Component {
constructor() {
super();
this.state = {
mess: "",
};
}
// 用于接收子组件的传值，参数为子组件传递过来的值
getDatas(data) {
this.setState({
mess: data,
});
}
render() {
return (
<div>
<Son data={this.getDatas.bind(this)}></Son>
<SonB mess={this.state.mess}></SonB>
</div>
);
}
}
export default DashBoard;
// 子组件2
class SonB extends React.Component {
render() {
return <div>在sonb组件中展示数据：{this.props.mess}</div>;
}
}
export default SonB;
组件状态state
创建初始化state（数据与视图有交互的时候）
定义组件的自定义属性，需要在组件的constructor 构造函数中初始化
// 构造函数 可以省略
constructor(props) {
console.log("初始化阶段");
// 初始化props
super(props);
//初始化状态 可以定义若干初始化值
this.state = {
name: "jack",
age: 25,
id: 23,
dec: "这是一段描述",
};
this.handleClick = this.handleClick.bind(this);
}
修改 setState
- 直接修改对象 setState(obj,cb)
- 传入修改函数 setState(fn,cb)
事件绑定
事件命名要采小驼峰式（cameCase）例如，updateUser()...
基本写法
<button onClick={this.updateUser}>更新数据</button>
调用的时候使用bind绑定this
handleClick() {
this.setState({ name: "peng" });
}
<button onClick={this.handleClick.bind(this)}>点击我</button>
构造函数使用bind绑定this
constructor(props) {
console.log("初始化阶段");
// 初始化props
super(props);
//初始化状态
this.state = {
name: "jack",
age: 25,
};
this.handleClick = this.handleClick.bind(this);
}
<button onClick={this.handleClick}>点击我</button>
public class fields
handleClick = () => {
this.setState({ name: "peng" });
};
<button onClick={this.handleClick}>Click me</button>
回调中使用箭头函数
handleClick() {
this.setState({ name: "peng" });
}
<button onClick={() => this.handleClick()}>Click me</button>
