02-React面向组件编程-基本使用与理解、组件实例的三大核心属性与事件处理资源-CSDN文库

共17个文件

html：12个

js：5个

react

前端开发

145 浏览量 2024-08-20 11:11:21 上传评论收藏 381KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

2、React面向组件编程.rar （17个子文件）

2、React面向组件编程

01_点击切换天气 state

02_state 的简写.html 2KB

01_点击切换天气.html 3KB

react-is.production.min.js 2KB

prop-types.js 47KB

react-dom.development.js 751KB

babel.min.js 773KB

react.development.js 99KB

02_props

04_props的简写方式2.html 2KB

03_props的简写方式.html 2KB

05_函数式组件使用props.html 2KB

02_props进行限制.html 2KB

01_props基本使用.html 2KB

03_refs与事件处理

01_refs.html 2KB

02_回调函数形式的ref.html 2KB

05_事件处理.html 2KB

03_回调函数的ref 回调次数.html 2KB

04_createRef.html 2KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>切换天气</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"> // 1、创建组件 class Weather extends React.Component { // 构造器调用几次？—— 1次 constructor(props) { console.log('constructor') super(props) // 借用构造器初始化状态 this.state = { isHot: false, wind: '微风', } // bind 改变 this 的指向并且返回一个新函数 this.changeWeather = this.changeWeather.bind(this) // 解决类中方法局部严格模式导致 this 为 undefined 问题 } // render调用几次？—— 1 + n 次， 1 是初始化的那次， n 是状态更新的次数 render() { console.log('render') // 读取状态 let { isHot, wind } = this.state console.log(this, this.state) return ( <h1 onClick={this.changeWeather}> 今天天气很{isHot ? '炎热' : '凉爽'}, {wind} </h1> ) } // changeWeather调用几次？—— 点几次调几次 changeWeather() { // changeWeather 放在那里？—— Weather 的原型对象，供实例使用 // 由于changeWeather 是作为 onClick 的回调，所以不是通过实例调用的，是直接调用 // 类中的方法默认开启了局部的严格模式，所以 changeWeather 中的 this 是 undefined // console.log('点击文字', this) // 为什么this 是 undefined？——类中的方法默认开启了局部的严格模式，所以 changeWeather 中的 this 是 undefined // 获取原来的 isHot 的值 let { isHot } = this.state // 严重注意：状态（State）里面的数据不能直接更改，要借助一个内置的 API 去更改 // this.state.isHot = !isHot // 这行就是直接更改！这是错误写法 // 严重注意：状态（state）必须通过 setState 进行更改,且更新是一种合并，不是替换 this.setState({ isHot: !isHot }) console.log(isHot, this) } } // 2、渲染组件到页面 // ReactDOM.render(组件，容器) ReactDOM.render(<Weather />, document.getElementById('test')) </script> </body> </html>

评论收藏

内容反馈