- 博客(18)
- 收藏
- 关注
RSS订阅
1原创 个人 尚硅谷React全家桶学习笔记(13)
个人 尚硅谷React全家桶学习笔记(十三) 37.引出生命周期 class Life extends React.Component{ state={ opacity:1 } death=()=>{ //卸载组件 ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //组件挂载完毕后调用 并且只调用一次 componentDidMount(){ this.timer=se
2022-01-22 15:01:42
906
原创 个人 尚硅谷React全家桶学习笔记(12)
个人 尚硅谷React全家桶学习笔记(十二) 32.react中的事件处理 1.通过onXxx属性指定事件 注意大小写（onClick） a.React使用的是自定义事件，而不是原生DOM事件（为了更好的兼容性) b.React中的时间是通过事件委托方式处理的（委托给组件最外层的元素 因为高效） 2.通过event.target得到发生时间的DOM元素对象（不要过度使用ref 发生事件的元素是要操作的元素就可以省略ref） 33.非受控组件 class Login extends React.C
2022-01-22 15:01:08
386
原创 个人 尚硅谷React全家桶学习笔记(11)
个人 尚硅谷React全家桶学习笔记(十一) 27.字符串形式的ref 作用类似ID class Demo extends React.Component{ showData=()=>{ const{input1}=this.refs alert(input1.value) } render(){ return( <div> <input ref='input1' type='text' placeholder='点击按钮'/> <butto
2022-01-22 15:00:36
313
原创 个人 尚硅谷React全家桶学习笔记(10)
个人 尚硅谷React全家桶学习笔记 （十） 20.props的基本使用 class Person extends React.Component{ render(){ const{name,age,sex}=this.props return ( <ul> <li>姓名:{name}</li> <li>性别:{sex}</li> <li>年龄:{age}</li> &l
2022-01-22 14:58:30
611
原创 个人 尚硅谷React全家桶学习笔记(9)
个人 尚硅谷React全家桶学习笔记 （九） 12.对state的理解 1.有状态的为复杂组件，无状态的为简单组件 2.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 3.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 13.初始化state class Demo extends React.Component{ constructor(props){ super(props) this.state={
2022-01-08 09:44:09
174
原创 个人 尚硅谷React全家桶学习笔记(8)
个人 尚硅谷React全家桶学习笔记（八） 10.类相关知识复习 1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。 2.如果A类继承了B类，且A类中卸了构造器，那么A类构造器中的super是必须要调用的。 3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用。 11.类式组件 class Demo extends React.Component{ render(){ return <h2>我是用类式定义的组件(适用于【复杂组件】的定义)&l
2022-01-08 09:43:38
262
原创 个人 尚硅谷React全家桶学习笔记(7)
个人 尚硅谷React全家桶学习笔记 （七） 8.开发者工具的安装 省略… 9.函数式组件 function Demo(){ return <h2>我是用函数式定义的组件(适用于【简单组件】的定义)</h2> } ReactDOM.render(<Demo/>,document.getElementById('test')) 注意点 1.函数名首字母必须大写 （Demo） 2.函数必须有返回值 3.渲染时必须写组件标签 并且闭合 React的操作 1.Rea
2022-01-08 09:43:03
299
原创 个人 尚硅谷React全家桶学习笔记(6)
个人 尚硅谷React全家桶学习笔记 （六） 6.jsx小练习 const data=['Angular','React','Vue'] const VDOM=( <div> <h1>前端js框架列表</h1> <ul>{ data.map((item,index)=>{ return<li key={index}>{item}</li> }) }</ul> &
2022-01-08 09:42:10
103
原创 个人 尚硅谷React全家桶学习笔记(5)
个人 尚硅谷React全家桶学习笔记 （五） 5.JSX语法规则 JSX 全称: JavaScript XML react定义的一种类似于XML的JS扩展语法: JS + XML本质是 React.createElement(component,props,…children)方法的语法糖 作用:用于简化创建虚拟DOM 1)写法: var ele=<h1>Hello JSX!</h1> 2)注意1::它不是字符串，也不是HTML/XML 标签 3)注意2
2022-01-08 09:41:37
158
原创 个人 尚硅谷React全家桶学习笔记(4)
个人 尚硅谷React全家桶学习笔记 （四） 4.虚拟DOM与真实DOM 关于虚拟DOM 虚拟DOM本质是Object数据类型对象（一般对象）。 虚拟DOM属性相比真实DOM少很多,因为虚拟DOM是React内部在用，无需真实DOM那么多属性。 虚拟DOM最终会被React转化为真实DOM，呈现在页面上 ...
2021-12-26 10:44:12
176
原创 个人 尚硅谷React全家桶学习笔记(3)
个人 尚硅谷React全家桶学习笔记 （三） 3.虚拟DOM的两种创建方式 使用js创建虚拟DOM 无需引入babel.min.js 脚本类型为 type="text/javascript" 创建虚拟DOM const VDOM=React.createElement(标签名，标签属性，标签内容) const VDOM=React.createElement('h1',{id:"title"},'Hello,React') 标签内嵌套标签 JSX写法 const VDOM=(<h1 id="tit
2021-12-26 10:43:01
374
原创 个人 尚硅谷React全家桶学习笔记(2)
个人 尚硅谷React全家桶学习笔记 （二） 2.React案例 引入文件 react.js React的核心库 react-dom.js 提供操作DOM的react扩展库 babel.min.js 解析JSX语法 代码转为JS代码的库 核心库必须在扩展库之前引入 自己写的脚本类型为 type="text/babel" 创建虚拟DOM const DOM名=内容 const VDOM=<h1 id="title">Hello,React</h1> 渲染虚拟DOM到页
2021-12-26 10:38:02
372
原创 个人 尚硅谷React全家桶学习笔记(1)
个人 尚硅谷React全家桶学习笔记 （一） B站传送门 1.React简介 React是什么 React是一个将数据渲染为HTML视图的开源JavaScript库。用于构建用户界面的JS库。 React由谁开发的 由Facebook开发，且开源。 1.起初由Facebook的软件工程师Jordan Walke创建。 2.于2011年部署于Facebook的newfeed。 3.随后在2012年部署于Instagram 4.2013年5月宣布开源。 … 为什么要学 原生JS的疼点 1.操作DOM繁
2021-12-26 10:33:09
310
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人