文章目录
React 组件
创建组件
组件分为两类,分别是函数式组件,以及类组件
函数式组件
函数式组件中的 this
babel 官网的试一试,可以把函数复制进来看一看
类组件
类中的一般方法放到了类的原型对象上
<script type="text/babel">
//1.创建类式组件
class MyComponent extends React.Component {
render() {
//render是放在哪里的?—— MyComponent的原型对象上,供实例使用。
//render中的this是谁?—— MyComponent的实例对象 <=> MyComponent组件实例对象。
console.log("render中的this:", this);
return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>;
}
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent />, document.getElementById("test"));
/*
执行了ReactDOM.render(<MyComponent/>.......之后,发生了什么?
1.React解析组件标签,找到了MyComponent组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/
</script>
组件三大特征
- state
- props
- ref
state
首先设置组件的 state
,进行状态的初始化:
<script type="text/babel">
class Weather extends React.Component {
constructor(props) {
super(props); // 注意这个是提前写的
this.state = { // 初始化状态
isHot: true,
};
}
render() {
const { isHot } = this.state;
return <h1>今天天气很{isHot ? "炎热" : "凉爽"}</h1>;
}
}
ReactDOM.render(<Weather />, document.querySelector("#test"));
</script>
添加点击事件:
类中的方法默认开启了局部的严格模式
setState
状态不可以直接更改,必须要借助一个内置的 API:setState({})
,要求必须传递一个对象,而且是合并操作
复杂模式的修改,理解一下this
和其他的概念
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//构造器调用几次? ———— 1次
constructor(props){
console.log('constructor');
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次? ———— 1+n次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render');
//读取状态
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
//changeWeather调用几次? ———— 点几次调几次
changeWeather(){
//changeWeather放在哪里? ———— Weather的原型对象上,供实例使用
//由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用
//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意:状态必须通过setState进行更新,且更新是一种合并,不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意:状态(state)不可直接更改,下面这行就是直接更改!!!
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
在开发中很少使用到构造函数,所以,属性和方法的设置,类似下面的代码块
- 属性:用赋值语句
- 方法:用赋值+箭头函数
<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false,wind:'微风'}
render(){
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = () => {
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
总结一下:
- 组件中
render
方法中的this
为组件实例对象 - 组件自定义的方法中
this
为undefined
,如何解决?
a). 强制绑定this: 通过函数对象的bind()
b). 箭头函数 - 状态数据,不能直接修改或更新
props
基本传递
外部往组件中带东西
批量传递
而且 ...obj
在 babel
和 react 环境
下,只有在标签上才可以,如果你想输出的话是不可以的。
函数式组件的传值
对 Props 进行限制【类式组件】
通过引入新的库 prop-types.js
,引入完之后,全局中会多出个新的对象,叫做:PropTypes
- 类型限制
- 必要性的显示
- 默认值的设置
class Person extends React.Component {
render() {
const { name, age, sex } = this.props;
return (
<ul>
<li>姓名:{name}</li>
<li>性别:{sex}</li>
<li>年龄:{age + 1}</li>
</ul>
);
}
}
//对标签属性进行类型、必要性的限制
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
};
对 Props 进行限制【函数式组件】
对 prop
的限制,也就是给这个类填上些属性
refs
字符串形式的 refs (不推荐使用)
通过给 ref
属性,可以给标签添加标记,比方说下面 handle1
方法中通过 refs
拿到 input 原生DOM
<script type="text/babel">
class Demo extends React.Component {
handle1 = () => {
console.log(this);
const { inp1 } = this.refs;
alert(inp1.value);
};
render() {
return (
<div>
<input ref="inp1" type="text" />
<button onClick={this.handle1}>点我</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.querySelector("#test"));
</script>
打开控制台看一下
回调 ref
基本使用
react
会帮你调用你在 ref
中定义的函数,并且把当前的标签节点作为形参传入函数中
<script type="text/babel">
class Demo extends React.Component {
handle1 = () => {
const { inp1 } = this;
alert(inp1.value);
};
render() {
return (
<div>
<input type="text" ref={(c) => (this.inp1 = c)} />
<button onClick={this.handle1}>点击</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
调用次数
如果你用内联函数的话,那么在组件更新的时候会调用两次
<script type="text/babel">
class Demo extends React.Component {
state = {
isHot: false,
};
handle1 = () => {
const { inp1 } = this;
alert(inp1.value);
};
handleChangeWeather = () => {
const { isHot } = this.state;
this.setState({
isHot: !isHot,
});
};
render() {
const { isHot } = this.state;
return (
<div>
<h1>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
<input
type="text"
ref={(c) => {this.inp1 = c; console.log("回调ref:>>", c);}}
/>
<br />
<button onClick={this.handle1}>点我获取</button>
<button onClick={this.handleChangeWeather}>点我切换天气</button>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("test"));
</script>
代码执行后的效果如下图所示:
这个在官方文档上也有说明,拉倒最底下
官方说如果是内联函数的话,那么在每次渲染的时候又会创建新的函数实例,解决的办法就是绑定好了,别让它创建即可
修改后的代码效果如下:
createRef API (官方推荐的方式)
通过调用 React.createRef()
来创建一个 ref
的容器,
<script type="text/babel">
//创建组件
class Demo extends React.Component{
/*
React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的
*/
myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
alert(this.myRef.current.value);
}
//展示右侧输入框的数据
showData2 = ()=>{
alert(this.myRef2.current.value);
}
render(){
return(
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
事件处理
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了更高效
(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
非受控组件 & 受控组件
包含表单的组件会分类为
- 非受控组件:输入类的
dom
(比方说input
、checkbox
、radio
等)是现用现取的 - 受控组件(推荐使用):输入类的
dom
,通过state
维护,使用的时候从state
中获取,(类似vue
中的v-model
)
其中非受控组件的例子如下:
<script type="text/babel">
//创建组件
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名:<input ref={c => this.username = c} type="text" name="username"/>
密码:<input ref={c => this.password = c} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
event.preventDefault()
// 阻止表单提交,阻止一些默认的行为
受控组件的例子如下:
<script type="text/babel">
class Demo extends React.Component {
state = {
username: "",
password: "",
};
setUserName = (e) => {
this.setState({
username: e.target.value,
});
};
setPassword = (e) => {
this.setState({
password: e.target.value,
});
};
handleSubmit = (e) => {
e.preventDefault();
const { username, password } = this.state;
alert(`${username}, ${password}`);
};
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名:
<input type="text" onChange={this.setUserName} name="username" />
密码:
<input
type="password"
onChange={this.setPassword}
name="password"
/>
<button>登录</button>
</form>
);
}
}
ReactDOM.render(<Demo />, document.querySelector("#test"));
</script>
高阶函数 & 函数柯里化
问题场景:
还是上面的例子,如果我想通过受控组件,维护多个Form
的字段
比方说,我们是注册组件,需要保存用户名,密码,确认密码,性别,地址等等多字段
我们不可能写多个save
函数为每一个字段去做状态的保存,而是通过统一的函数去做状态的保存
下面的截图中 saveFormData
就是高阶函数
//#region
// region 是为了注释的折叠,在编译器中如果发现代码这点不了的时候,可以添加这个
/*
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
*/
//#endregion
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存表单数据到状态中
saveFormData = (dataType)=>{
return (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={this.saveFormData('username')} type="text" name="username"/>
密码:<input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
// 渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
高阶函数
高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。
- 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。
- 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。
常见的高阶函数有:Promise
、setTimeout
、arr.map()
等等
函数柯里化
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。 (注意对统一处理的理解)
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
不用函数柯里化的写法
<script type="text/babel">
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存表单数据到状态中
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>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
</script>