文章目录
b站课程链接跳转
ps: written by Winter-prince
学习前端React做的笔记,供以后复习使用。关键代码基本上都有截图和文字说明,有些部分可能由于内容比较简单没有记录,点击上方课程链接即可跳转前往课程查看详情,关于React的笔记一共有5篇博客,如果需要查看完整内容的请前往专栏查看
我的github:Winter-prince
P21-40
P21 批量传递props
展开运算符 (…)
reduce函数,求和
let arr1 = [1, 3, 5, 7, 9];
let arr2 = [2, 4, 6, 8, 10];
console.log(...arr1); //展开-一个数组
let arr3 = [...arr1, ...arr2]; //连接数组
function sum(...numbers) {
return numbers.reduce((preValue, currentValue) => {
return preValue + currentValue;
});
}
console.log(sum(1, 2, 3, 4));
mdn
babel和react允许 …对象 语法
P22 对props对进行类型限制
引入prop-types.js包
//对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
sex: PropTypes.string, //限制sex为字符串
age: PropTypes.number, //限制age为数值
speak: PropTypes.func, //限制speak为函数
};
//指定默认标签属性值
Person.defaultProps = {
sex: "男", //sex默认值为男
age: 18, //age默认值为18
};
P23 props简写
props是只读的
将限制设置为静态成员
class Person extends React.Component {
//对标签属性进行类型、必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, //限制nal
sex: PropTypes.string, //限制sex为字符串
age: PropTypes.number, //限制age为数值
speak: PropTypes.func, //限制speak为函数
};
//指定默认标签属性值
static defaultProps = {
sex: "男", //sex默认值为男
age: 18, //age默认值为18
};
render() {}
}
P24 类式组件构造器和props
构造器主要两种用途:
1.初始化state
2.为时间处理函数绑定方法
在子类中简写:
state={}
demo = ()=>{
//函数体
}
类中的构造器能省略就省略。
P25 函数式组件使用props
函数式组件可以使用props,但无法使用state和refs,后续有hooks
function Person(props) {
const { name, age, sex } = props;
return (
<ul>
<li>姓名: {name}</li>
<li>性别: {sex}</li>
<li>
年龄:
{age}
</li>
</ul>
);
}
函数式组件可以在函数外部使用如下方法实现限制(大小写要注意)
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传,且为字符串
sex: PropTypes.string, //限制sex为字符串
age: PropTypes.number, //限制age为数值
};
//指定默认标签属性值
Person.defaultProps = {
sex: "男", //sex默认值为男
age: 18, //age默认值为18
};
P26 props总结
见课程相关资料
P27字符串形式的ref
//创建组件
class Demo extends React.Component {
//展示左侧输入框的数据
showData = () => {
const { input1 } = this.refs;
alert(input1.value);
};
//展示右侧输入框的数据
showData2 = () => {
const { input2 } = this.refs;
alert(input2.value);
};
render() {
return (
<div>
<input ref=" input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input
ref="input2"
onBlur={this.showData2}
type="text"
placeholder="失去焦点提示数"
/>
</div>
);
}
}
P28回调形式的ref
P29回调ref调用次数的问题
组件更新时,内联方式会调用两次,但是很多时候这无关紧要
并且通常开发的时候还是写箭头函数的
P30 createRef的使用
P31总结ref
1.字符串形式
2.ref形式
3.createRef形式
P32 react中的事件处理
图中情况可以使用事件委托的方式实现,可以避免使用refs
P33非受控组件
收集表单数据
非受控——现用现取
P34 受控组件
受控组件——随着输入更改状态,能够省略掉refs
//保存用户名到状态中
saveUsername = (event) => {
this.setState({ username: event.target.value });
};
//保存密码到状态中
savePassword = (event) => {
this.setState({ password: event.target.value });
};
//表单提交的回调
handleSubmit = (event) => {
event.preventDefault(); //阻止表单提交
const { username, password } = this.state;
alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
用户名:{" "}
<input onChange={this.saveUsername} type="text" name="username" />
密码:{" "}
<input onChange={this.savePassword} type=" password" name="password" />
<button>登录</button>
</form>
);
}
P35 函数科里化
函数连续调用
P36不用科里化的写法
//保存表单数据到状态中
saveFormData = (dataType, event) => {
this.setState({ [dataType]: event.target.value });
};
//表单提交的回调
handleSubmit = (event) => {
event.preventDefault(); //阻止表单提交
const { username, password } = this.state;
alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`);
};
render() {
return (
<form onSubmit={this.handlesubmit}>
用户名:
<input
onChange={(event) => this.saveFormData("username", event)}
type="text"
name="username"
/>
密码:
<input
onChange={(event) => this.saveFormData("password", event)}
type=" password"
name="password"
/>
<button>登录</button>
</form>
);
}
P37 生命周期
定时器不合适
render调用时机:初始化渲染、状态更新之后
componentDidMount()调用时机:组件挂载完毕
清除计时器
P38 生命周期 组件挂载流程
P39 生命周期 setState流程
P40 forceUpdate流程
略