2021-12-21 学习记录--React-组件实例三大核心属性：state、props、refs
一、组件实例三大核心属性之一：state
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_state的简写方式title>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 1.创建类式组件
class Weather extends React.Component {
// 初始化状态(赋值语句)
state = {isHot:true,wind:'微风'};
render() {
// 组件中render方法中的this为组件实例对象
const {isHot,wind} = this.state; // 相当于const {isHot} = {isHot:true}; -> 将等号后面部分取名为obj，相当于 const isHot = obj.isHot
// 这儿的changeWeather后面不能加小括号，不然一来就调用该函数了，并且因为该函数的的返回值是undefined，所以点击事件也起不了作用了
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
// 自定义方法(要用赋值语句的形式+箭头函数，因为：1.类中可以直接写赋值语句，比如a=1；2.箭头函数没有自己的this，它的this是继承而来，其this指向往外找)
changeWeather = () => {
// 获取原来的isHot值
const {isHot} = this.state; // 相当于 const isHot = this.state.isHot;
// 将原来的isHot值取反，再赋值给this.state.isHot
/*
严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！（需借助一个内置的API去更改,即setState）
this.state.isHot = !isHot; // 这是错误的写法
严重注意：状态(state)必须通过setState进行修改，且修改是一种合并，不是替换。下面即正确写法
*/
this.setState({
isHot: !isHot,
})
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
script>
body>
html>
【补充举例】 用state里的内容在render中进行遍历：
二、组件实例三大核心属性之二：props
1、类式组件使用props
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_props的简写方式title>
head>
<body>
<div id="test1">div>
<div id="test2">div>
<div id="test3">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/javascript" src="../js/prop-types.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建类式组件
class Person extends React.Component {
// 需求：自定义用来显示一个人员信息的组件
// 1). 姓名必须指定，且为字符串类型;
// 2). 性别为字符串类型，如果性别没有指定，默认为男
// 3). 年龄为数字类型，默认值为18
// 对props进行限制时，可放在类里面，在其前加个static即可
// 对标签属性进行类型、必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, // 姓名必须指定，且为字符串类型
sex: PropTypes.string, // 性别为字符串类型
age: PropTypes.number, // 年龄为数值类型
speak:PropTypes.func, // func表示传函数类型
}
// 指定默认标签属性值
static defaultProps = { // 设置未传值时的默认值
sex: '男', // 如果性别没有指定，默认为男
age: 18, // 如果年龄没有指定，默认为18
}
// render必须写，且有返回值
render() {
// 组件中render方法中的this为组件实例对象
console.log(this);
console.log(this.props);
// es6-对象解构
const {name,age,sex} = this.props;
// props是只读的
// this.props.name = 'jack' // 此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
// 渲染组件到页面
// 第一种写法
ReactDOM.render(<Person name="tom" sex="女" speak={speak}/>,document.getElementById('test1'));
ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test2'));
// 第二种写法
const p = {name:'老刘',age:18,sex:'女'}
console.log(...p); // 输出没有内容，因为通过babel+react确实可以让展开运算符展开一个对象滴，但是不允许你随便使用
// 这儿的{...p}里的大括号并不是表示赋值，而是表示里面装js表达式，然后这儿的...p是展开运算符，通过babel+react确实可以让展开运算符展开一个对象滴，但是不允许你随便使用
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'));
function speak() {
console.log('我说话了');
}
script>
body>
html>
2、函数式组件使用props
【组件实例三大核心属性：state、props、refs中，函数式组件只能使用props】
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_函数式组件使用propstitle>
head>
<body>
<div id="test1">div>
<div id="test2">div>
<div id="test3">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/javascript" src="../js/prop-types.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建函数式组件
function Person(props) { // 函数式组件可以使用props,但是不能使用state或refs
// es6-解构赋值
const {name,sex,age} = props;
console.log(props)
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age}</li>
</ul>
)
}
// 需求：自定义用来显示一个人员信息的组件
// 1). 姓名必须指定，且为字符串类型;
// 2). 性别为字符串类型，如果性别没有指定，默认为男
// 3). 年龄为数字类型，默认值为18
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 姓名必须指定，且为字符串类型
sex: PropTypes.string, // 性别为字符串类型
age: PropTypes.number, // 年龄为数值类型
}
// 指定默认标签属性值
Person.defaultProps = { // 设置未传值时的默认值
sex: '男', // 如果性别没有指定，默认为男
age: 18, // 如果年龄没有指定，默认为18
}
// 渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'));
script>
body>
html>
【补充】3、父组件通过props向子组件传递值
父组件
子组件
三、组件实例三大核心属性之三：refs
1、字符串形式的ref【过时】
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_字符串形式的ref(过时)title>
<style>
style>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建组件
class Demo extends React.Component {
// 点击展示左侧输入框的数据
showData = () => {
console.log(this); // 这儿的this是类Demo的实例对象
const {input1} = this.refs;
alert(input1.value);
}
// 右侧输入框失去焦点后展示其输入框里的数据
showData2 = () => {
console.log(this); // 这儿的this是类Demo的实例对象
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} ref="input2" type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
script>
body>
html>
2、回调函数形式的ref
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_回调函数形式的reftitle>
<style>
style>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建组件
class Demo extends React.Component {
// 点击展示左侧输入框的数据
showData = () => {
console.log(this); // 这儿的this是类Demo的实例对象
const {input1} = this;
alert(input1.value);
}
// 右侧输入框失去焦点后展示其输入框里的数据
showData2 = () => {
console.log(this); // 这儿的this是类Demo的实例对象
const {input2} = this;
alert(input2.value);
}
render() {
return (
<div>
<input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={currentNode => this.input2 = currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
script>
body>
html>
3、createRef的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4_createRef的使用title>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建组件
class Demo extends React.Component {
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”的
*/
myRef = React.createRef();
myRef2 = React.createRef();
// 点击展示左侧输入框的数据
showData = () => {
// console.log(this.myRef);
console.log(this.myRef.current); // 获取到input的DOM节点
alert(this.myRef.current.value);
}
// 右侧输入框失去焦点后展示其输入框里的数据
showData2 = () => {
console.log(this.myRef2.current); // 获取到input的DOM节点
alert(this.myRef2.current.value);
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'));
script>
body>
html>
These are bilibili尚硅谷React学习视频的 学习笔记~