- 博客(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
904
原创 个人 尚硅谷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
382
原创 个人 尚硅谷React全家桶学习笔记(11)
个人 尚硅谷React全家桶学习笔记(十一)27.字符串形式的ref作用类似IDclass 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
312
原创 个人 尚硅谷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
610
原创 个人 尚硅谷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
172
原创 个人 尚硅谷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
258
原创 个人 尚硅谷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
296
原创 个人 尚硅谷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 XMLreact定义的一种类似于XML的JS扩展语法: JS + XML本质是 React.createElement(component,props,…children)方法的语法糖作用:用于简化创建虚拟DOM1)写法:var ele=<h1>Hello JSX!</h1> 2)注意1::它不是字符串，也不是HTML/XML 标签 3)注意2
2022-01-08 09:41:37
156
原创 个人 尚硅谷React全家桶学习笔记(4)
个人 尚硅谷React全家桶学习笔记 （四）4.虚拟DOM与真实DOM关于虚拟DOM虚拟DOM本质是Object数据类型对象（一般对象）。虚拟DOM属性相比真实DOM少很多,因为虚拟DOM是React内部在用，无需真实DOM那么多属性。虚拟DOM最终会被React转化为真实DOM，呈现在页面上...
2021-12-26 10:44:12
175
原创 个人 尚硅谷React全家桶学习笔记(3)
个人 尚硅谷React全家桶学习笔记 （三）3.虚拟DOM的两种创建方式使用js创建虚拟DOM无需引入babel.min.js脚本类型为 type="text/javascript"创建虚拟DOMconst VDOM=React.createElement(标签名，标签属性，标签内容)const VDOM=React.createElement('h1',{id:"title"},'Hello,React')标签内嵌套标签JSX写法const VDOM=(<h1 id="tit
2021-12-26 10:43:01
372
原创 个人 尚硅谷React全家桶学习笔记(2)
个人 尚硅谷React全家桶学习笔记 （二）2.React案例引入文件react.js React的核心库react-dom.js 提供操作DOM的react扩展库babel.min.js 解析JSX语法 代码转为JS代码的库核心库必须在扩展库之前引入自己写的脚本类型为 type="text/babel"创建虚拟DOMconst 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年部署于Instagram4.2013年5月宣布开源。…为什么要学原生JS的疼点1.操作DOM繁
2021-12-26 10:33:09
305
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人