React面向组件编程 文章目录 系列文章目录React面向组件编程一、使用 React 开发者工具调试二、基本理解和使用2.1 函数式组件（适用于简单组件<无状态组件>的定义）2.2 类式组件（适用于复杂组件<有状态组件>的定义） 三、组件实例的三大核心属性1、状态（state）理解强烈注意示例效果state 标准写法state 简写 2、props理解作用编码 *** 作示例效果在类式组件中使用props在类式组件中使用props-简写在函数式组件中使用props 3、refs理解示例效果字符串形式的ref回调函数形式的ref回调函数ref——class的绑定函数createRef API不要过度使用refRefs总结 一、使用 React 开发者工具调试
React Developr Tools（chrome插件）
二、基本理解和使用 2.1 函数式组件（适用于简单组件<无状态组件>的定义）
<script type="text/babel"> /* 此处一定要写babel，表示这个脚本是jsx格式的 */
// 1.创建函数式组件
function MyComponent() {
console.log(this); // 此处的this是undefined,因为babel编译后开启了严格模式，this无法指向window
return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent />, document.getElementById('test'))
/*
执行了ReactDOM.render(<script type="text/babel"> /* 此处一定要写babel，表示这个脚本是jsx格式的 */
// 1.创建类式组件
class MyComponent2 extends React.Component {
render() {
// render中的this是谁？——MyComponent2的实例对象。(MyComponent2组件实例对象)
console.log(this)
return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
}
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent2 />, document.getElementById('test'))
/*
执行了ReactDOM.render(三、组件实例的三大核心属性 1、状态（state） 理解 state是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）数据被放在组件的
state里，然后将state交给React去渲染虚拟DOM。
强烈注意
组件中render方法中的 this 为组件实例对象组件自定义的方法中 this 为 undefined，如何解决？
强制绑定 this：通过函数对象的bind()箭头函数 状态数据，不能直接修改或更新
示例效果
需求: 定义一个展示天气信息的组件
1. 默认展示天气炎热 或 凉爽
2. 点击文字切换天气
state 标准写法<script type="text/babel">
// 1.创建组件
class Weather extends React.Component {
// 构造函数调用几次？ ——1次
constructor(props) {
super(props)
console.log(this)
this.state = { isHot: true, wind: '微风' }
// 解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
// 加上这一句后，changeWeather中就可以拿到Weather这个类的实例对象了
// 调用bind()方法，改变了changeWeather中的this，使之指向了类的实例对象
// 然后将bind()方法生成的新函数(函数内容都一样，只是函数中的this指向改变了)赋值给this.changeWeather,也就是this实例对象上的一个名为changeWeather的方法
}
// render调用几次？ —— 1+n 次，1是初始化那次，n是状态更新次数
render() {
const { isHot, wind } = this.state // 解构this.state对象，把isHot赋值给const声明的对象
return <h1 id="title" onClick={this.changeWeather} >今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
// 这里的this.changeWeather，是指调用Weather实例上的changeWeather方法，找到了上面bind()函数生成的新函数
// 下面的changeWeather()是类Weather中的方法，实例找到了自己的changeWeather方法就不会再去原型链中找类的changeWeather
}
// changeWeather调用几次？ —— 点几次调用几次
changeWeather() {
// changeWeather放在哪里？ —— Weather的原型对象上，供实例使用
// 由于 changeWeather 是作为onClick的回调，不是通过实例调用的，是点击h1标签后直接调用
// 类中的方法默认开启了局部的严格模式（'use strict'），所以changeWeather中的this为undefined
console.log(this)
// 获取原来的isHot值
const isHot = this.state.isHot
// 严重注意，状态（state）不可直接更改，要借助一个内置的API(setState)去更改
// 更改其实是合并而不是替换,也就是isHot更改了，但是wind不会丢失
this.setState({ isHot: !isHot })
// this.state.isHot = !isHot 这是错误的更改
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))
/* const title = document.getElementById('title')
title.addEventListener('click', () => {
console.log('标题被点击了')
}) */
/* const title = document.getElementById('title')
title.onclick = () => {
console.log('标题被点击了')
} */
</script>
<script type="text/babel">
class Weather extends React.Component {
/* constructor(props) {
super(props)
this.state = { isHot: true, wind: '微风' }
this.changeWeather = this.changeWeather.bind(this)
} */
// 不借助构造函数直接对实例对象上的state属性赋值
state = { isHot: true, wind: '微风' }
render() {
console.log(this)
const { isHot, wind } = this.state
return <h1 id="title" onClick={this.changeWeather} >今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
}
// 这里整体是一个赋值语句，就像state={}一样，changeWeather作为实例对象上的一个属性被赋值
// 而箭头函数默认没有this,如果函数体中调用了this，默认会指向包裹箭头函数的上一层（也就是Weather的实例对象）
changeWeather = () => {
const isHot = this.state.isHot
this.setState({ isHot: !isHot })
}
}
ReactDOM.render(<Weather />, document.getElementById('test'))
</script>
⬆️：这才是我们日常开发中会用到的写法
2、props 理解 每个组件对象都会有props（properties的简写）属性组件标签的所有属性都保存在 props 中 作用 通过标签属性从组件外向组件内传递变化的数据注意: 组件内部不要修改props数据 编码 *** 作
1、内部读取某个属性值
this.props.name
2、对props中的属性值进行类型限制和必要性限制
第一种方式（React v15.5 开始已弃用）：
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）:
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
3、扩展属性: 将对象的所有属性通过props传递
<Person {...person}/> // ... 展开运算符
4、默认属性值：
Person.defaultProps = {
age: 18,
sex:'男'
}
5、组件类的构造函数
constructor(props){
super(props)
console.log(props)//打印所有属性
}
需求: 自定义用来显示一个人员信息的组件
1. 姓名必须指定，且为字符串类型；
2. 性别为字符串类型，如果性别没有指定，默认为男
3. 年龄为字符串类型，且为数字类型，默认值为18
在类式组件中使用props<!-- 引入prop-types，用于对组件标签属性props进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// 创建组件
class Person extends React.Component {
render() {
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>
)
}
}
// 对标签属性进行类型、必要性的限制
Person.propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
age: PropTypes.number, // 限制age为数值
sex: PropTypes.string, // 限制sex为字符串
speak: PropTypes.func // 限制speak为函数
}
// 指定默认的标签属性值
Person.defaultProps = {
sex: '男',
age: 18
}
// 渲染组件
ReactDOM.render(<Person name="jerry" speak={speak} />, document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女" />, document.getElementById('test2'))
const p = { name: '老刘', age: 18, sex: '女' }
// 这种写法能够批量拿到数据，{...p}为展开运算符，是<!-- 引入prop-types，用于对组件标签属性props进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// 创建组件
class Person extends React.Component {
constructor(props) {
// 构造函数是否接收props，是否传递给super()，取决于：是否希望在构造函数中通过this访问props
super(props)
console.log(this.props)
}
render() {
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>
)
}
// 对标签属性进行类型、必要性的限制
static propTypes = {
name: PropTypes.string.isRequired, // 限制name必传，且为字符串
age: PropTypes.number, // 限制age为数值
sex: PropTypes.string, // 限制sex为字符串
}
// 指定默认的标签属性值
static defaultProps = {
sex: '男',
age: 18
}
}
// 渲染组件
ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))
</script>
<!-- 引入prop-types，用于对组件标签属性props进行限制 -->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/babel">
// 创建组件
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必传，且为字符串
age: PropTypes.number, // 限制age为数值
sex: PropTypes.string, // 限制sex为字符串
}
// 指定默认的标签属性值
Person.defaultProps = {
sex: '男',
age: 18
}
// 渲染组件
ReactDOM.render(<Person name="jerry" />, document.getElementById('test1'))
</script>
3、refs 理解
示例效果组件内的标签可以定义ref属性来标识自己
需求: 自定义组件, 功能说明如下:
1. 点击按钮, 提示第一个输入框中的值
2. 当第2个输入框失去焦点时, 提示这个输入框中的值
字符串形式的ref<script type="text/babel">
class Demo extends React.Component {
render() {
return (
// 字符串类型的ref效率不高，不太推荐使用，可能会在React未来版本中被移除
<div>
<input ref="input1" type="" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
// 展示左侧输入框的数据
showData = () => {
console.log(this.refs.input1)
const { input1 } = this.refs
alert(input1.value)
}
// 展示右侧输入框的数据
showData2 = () => {
const { input2 } = this.refs
alert(input2.value)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
回调函数形式的ref在这里需要注意：
React官方文档中，对于字符串形式的组件保持不推荐使用的态度。因此，我们最好使用其他的方式去使用组件中的ref属性，这里，官方推荐使用的是回调函数或createRef API。
// 在jsx中，可以使用 {/* */} 的方式写注释
<script type="text/babel">
// 创建组件
class Demo extends React.Component {
render() {
return (
<div>
{/* 代码执行步骤： */}
{/* React加载Demo组件时，执行render函数内的jsx代码，发现input中有ref属性，
属性内容是一个箭头函数，React就会帮我们调用这个回调函数，
并且把当前的DOM传进这个函数，这样就可以接收到当前的DOM节点了 */}
{/* 箭头函数接收到参数(当前的DOM节点)命名为（currentNode）,
将currentNode赋值给实例对象下的input1这个属性 */}
{/*
{ this.input1 = currentNode }} type=""
placeholder="点击按钮提示数据" /> */ }
{/* 箭头函数只有一个参数可以省略'()',箭头函数右边只有一条函数体可以省略'{}' */}
<input ref={currentNode => this.input1 = currentNode} type="" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={currentNode => this.input2 = currentNode} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
// 展示左侧输入框的数据
showData = () => {
const { input1 } = this
alert(input1.value)
}
// 展示右侧输入框的数据
showData2 = () => {
const { input2 } = this
alert(input2.value)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
但是仍需注意，这种
内联函数形式的回调ref，仍可能存在一点点的小问题。官网的说明如下：
我们还是以之前的那个天气变换的例子去说明：
<script type="text/babel">
class Demo extends React.Component {
state = { isHot: false }
render() {
const { isHot } = this.state
return (
<div>
<h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
{/* React在state更新的时候，根据新的state去重新渲染组件，
而为了确保上一次ref被清空，所以React在组件更新时调用了两次ref中的回调函数，
第一次传入null以清空上一次的ref缓存，
然后第二次再重新调用回调函数，传入需要的DOM节点
内联函数形式：（用的比较多）*/}
<input ref={currentNode => { this.input1 = currentNode; console.log('@', currentNode) }} type="text" />
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
showInfo = () => {
const { input1 } = this
alert(input1.value)
}
changeWeather = () => {
const { isHot } = this.state
this.setState({ isHot: !isHot })
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
回调函数ref——class的绑定函数简单的说，React在
更新组件时，会先传入null调用一次ref中的回调，以清空之前的ref；然后再传入参数currentNode，以调用第二次。每更新一次组件，ref中的回调函数就会被调用两次，一次传入null，一次传入参数currentNode。为了应对这种情况的出现，官方建议将ref的回调函数定义成 class 的绑定函数的方式去避免上述的问题。
<script type="text/babel">
class Demo extends React.Component {
state = { isHot: false }
render() {
const { isHot } = this.state
return (
<div>
<h2>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
<input ref={this.saveInput} type="text" />
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
// class 的绑定函数形式
saveInput = (currentNode) => {
this.input1 = currentNode
console.log('@', currentNode)
}
showInfo = () => {
const { input1 } = this
alert(input1.value)
}
changeWeather = () => {
const { isHot } = this.state
this.setState({ isHot: !isHot })
}
}
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
可以看出，换成了
class 的绑定函数形式之后，哪怕在函数内部打印了'@', currentNode，控制台也没有任何反应。这是因为，class 的绑定函数形式只在组件第一次渲染时调用一次，之后更新组件时，React不会再重复调用saveInput这个函数，这样问题就解决了～
createRef API
<script type="text/babel">
// 创建组件
class Demo extends React.Component {
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点(该容器是“专人专用”的)
也就是，调用React.createRef()创建了一个容器，通过赋值语句赋值给实例自身名为myRef的属性上
*/
myRef = React.createRef()
render() {
return (
<div>
{/* React执行render函数中的jsx代码时，
发现input上有一个ref属性而且是通过createRef方法创建的，
React就会把当前ref属性所在的DOM节点放到之前创建的那个容器上，
也就是把当前input这个DOM节点放到了实例自身名为myRef的容器上 */}
{/* 可以简写成ref={this.myRef = React.createRef()} */}
<input ref={this.myRef} type="" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2 = React.createRef()} type="" placeholder="失去焦点提示数据" />
</div>
)
}
// 展示左侧输入框的数据
showData = () => {
console.log(this.myRef)
alert(this.myRef.current.value)
}
showData2 = () => {
alert(this.myRef2.current.value)
}
}
// 渲染组件到页面
ReactDOM.render(<Demo />, document.getElementById('test'))
</script>
不要过度使用ref
如图所示，官方文档中建议
勿过度使用Refs。其实，对于上文中的createRef API中的失去焦点提示数据，还有更简便的写法，完全可以不使用ref。
{/* 发生事件的元素正好是需要 *** 作的元素本身，可以省略ref */}
<input onBlur={this.showData2} type="" placeholder="失去焦点提示数据" />
showData2 = (event) => {
// 传入的event是发生onBlur事件的事件源，也就是失去焦点提示数据的input框，
// 通过event.target.value拿到input中的值
alert(event.target.value)
}
字符串形式的ref：最为简便，但是代码效率低，不推荐使用，不过用了也没什么大不了。回调函数（内联）ref：虽然存在更新组件时重复调用的问题，但是几乎没有什么影响，引用官方文档的话来说，就是“无关紧要的”，很多开发者更喜欢的是这种ref的使用方式。回调函数（class的绑定函数）ref：解决了更新组件时的重复调用的问题，但是更为繁琐了，其实内联函数形式的回调ref已经够用了。createRef API：最为规范的一种使用方式，也是React在16.3版本引入的新API，更是React最为推荐的一种使用ref的方式。勿过度使用Refs：发生事件的元素正好是需要 *** 作的元素本身时，ref可以省略，转而使用event.target代替。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）