![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react学习笔记
Happy_Boy_z
不可能打工的,这辈子都不可能打工的,树林里程序猿个个都是人才,说话又好听~~~~
展开
-
React学习08_组件间的传值与this的绑定
React学习08_组件间的传值与this的绑定父子传值子向父传值bind(this,...args)兄弟间传值 父子传值 父组件在使用子组件时,给它的属性传入想给它的数据 子组件通过 this.props.属性名 可以获取该数据 子向父传值 父组件向子组件传入一个带参数的方法 子组件通过向这个方法传入自己的数据,在父组件触发该方法,父组件通过 this.setState 来修改父组件的值并渲染从而实现子向父传值 bind(this,…args) 该方法主要是把当前实例绑定到方法目标方法中 如下面的原创 2020-05-24 17:12:42 · 161 阅读 · 0 评论 -
React学习07_脚手架基本使用
create-react-app原创 2020-05-21 22:18:47 · 140 阅读 · 0 评论 -
React学习06_事件处理_条件渲染_状态提升
React学习06_事件处理修改this指向条件渲染状态提升 修改this指向 bind 方式绑定 函数通过箭头函数进行创建 constructor提前绑定 把事件的调用写成箭头函数的调用方式 <div id="reactDom"></div> <script type="text/babel"> class Com extends React.Component { constructor(props){ super(原创 2020-05-20 22:50:18 · 141 阅读 · 0 评论 -
React学习05_ref
React学习day05_ref 转发refs react当中提供了一个ref的数据,表示当前组件的真正实例的引用(不能在无状态组件当中来进行使用 因为无状态组件没有实例) 有三种方式 进行 ref的使用 字符串的方式 回调函数,就是在dom节点上挂载函数,入参形参 React.createRef() 官方建议我们 不要过度使用 refs 需要优先考虑state 当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数。 当给组件添加 ref 属性时,ref 回调接原创 2020-05-20 22:28:13 · 137 阅读 · 0 评论 -
React学习04_props与state
React学习day05_props与statestatesetStatepropsprops验证 props 是组件对外的接口 组件内可以引用其他组件 组件之间的引用就形成了一个树状的接口,如果下层组件需要使用上层组件的数据 上层组件就可以通过下层组件中 props 来进行数据的传递,因此props就是组件对外的接口 state是组件对内的接口 除了使用上层组件传递的数据之外,他自身也可能有需要管理的数据 这个就是 state 当数据改变时,状态就会改变 声明渲染 – 数据改变 操作都不用我原创 2020-05-20 22:14:46 · 106 阅读 · 0 评论 -
React学习03_组件与props
无状态组件 基本使用 function MyCom() { return ( <div>我是一个无状态组件</div> ) } // 调用组件 let com = ( <div> <MyCom /> </div> ) ReactDOM.render(com, document.getElementById("reactDom")) 父子嵌套 function MyComA() {原创 2020-05-19 21:26:15 · 127 阅读 · 0 评论 -
React学习02_jsx基本用法
React学习day02_jsx基本用法模板使用表达式函数调用属性绑定类名绑定数组遍历事件绑定遍历对象 模板 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">原创 2020-05-19 20:56:36 · 141 阅读 · 0 评论 -
React学习01_开发环境搭建
环境搭建 react.js 核心文件 react-dom.js 渲染页面中的DOM,当前文件依赖于react核心文件 babel.js ES6 转换成 ES5 将 JSX语法转换为JavaScript,方便浏览器进行代码的兼容 下载 react核心包 npm i react --save react-dom npm i react-dom --save babel npm i babel-standalone --save ...原创 2020-05-19 20:18:56 · 130 阅读 · 0 评论