![](https://img-blog.csdnimg.cn/20210905093250442.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
note
iteval
大把时间迷茫,几个瞬间成长
展开
-
react 组件传值
一、父传子 - 函数式组件 function Father (props) { render() { <div> <Child getMsg={props.msg.money}/> </div> } } function Child (props) { } const msg = {money: 1000000}; ReactDOM.render(<Father {...msg} />, document.getElementByi原创 2021-09-05 14:08:34 · 63 阅读 · 0 评论 -
使用 ref 对已渲染到页面的节点进行标记
一、字符串形式的 ref <input type="text" /*给标签打上标记 ipt */ ref="ipt" /> 拿到标记的节点,对其进行操作 handleClick = () => { console.log(this); // 用 ref 标记了的标签,都会保存在 refs 里面 console.log(this.refs); // 获取 refs console.log(this.refs.ipt); // 获取 refs 里面的标记,返回标记所对应的标原创 2021-09-05 10:28:28 · 178 阅读 · 0 评论 -
组件的 props
一、函数式组件的 props function Demo (props) { // 由于函数式组件没有自己的 this 必须指定 props return ( <div> <ul> <li>{props.name}</li> <li>{props.age}</li> </ul> </div> ) } // 抽离挂到组件上面的 pro原创 2021-09-05 10:17:21 · 57 阅读 · 0 评论 -
react 组件
一、函数式组件 {/* - 定义组件的组件名 大写 - <组件名/> -- 单标签的形式 - 函数式组件没有 this */} // 1. 定义组件名 大写 function Demo() { return <h1>我是函数式组件</h1> } // 2. 将组件渲染到页面 ReactDOM.render(<Demo/>, document.getElementById('test')); 二、类式组件 {/*原创 2021-09-05 10:07:46 · 123 阅读 · 0 评论 -
jsx 语法规范
一、插值语法 – {} const str = 'hello react'; const VDOM = <h1>{str}</h1>; // 注意:是一对大括号 {} 和 Vue( {{}} ) 区分开 二、给标签添加类名 – className= "" | {} /* css: .active { background-color: red; } */ const VDOM = <h1 className="active">hello react&l原创 2021-09-05 09:59:09 · 117 阅读 · 0 评论 -
初识 react
<!-- 学 react 的原因: 1. 原生 js 操作 DOM 繁琐、效率低,每次都要去获取 DOM 每次操作 DOM 都会引起页面的重绘重拍 2. 原生 js 没有组件化,代码复用率低 react 的特点: 1. 采用组件化模式,声明式编码来提高开发效率以及组件复用率 2. 在 React Native 可以使用 react 语法进行移动端开发 3. 使用虚拟 DOM + Diffing 比较算法,尽量减少与真实 D原创 2021-09-05 09:48:09 · 155 阅读 · 0 评论