React.js小书学习
秃头指非官
学生
展开
-
react学习记录-dangerouslySetHTML 和 style 属性
文章目录dangerouslySetHTML 和 style 属性dangerouslySetHTMLstyle课后习题dangerouslySetHTML 和 style 属性dangerouslySetHTML出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 text(…) 函数一样,任何的 HTML 格式都会被转义掉:class Editor extends Component { constructor()原创 2020-07-04 11:03:44 · 746 阅读 · 0 评论 -
react学习记录-props.children 和容器类组件
文章目录props.children 和容器类组件小结课后练习props.children 和容器类组件有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容。这种结构在实际当中非常常见,类似于名片。这种组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候给它传入任意内容。先看一段这类容器类组件的实现代码:class Card extends Component { render () { return ( <div class原创 2020-07-01 23:40:47 · 371 阅读 · 0 评论 -
react学习记录-PropTypes 和组件参数验证
文章目录PropTypes 和组件参数验证PropTypesPropTypes 和组件参数验证JavaScript 语言的弱类型,让我们写代码很爽,但是也很容易出 bug。变量没有固定类型可以随意赋值,在我们构建大型应用程序的时候并不是什么好的事情。你写下了 let a = {} ,如果这是个共享的状态并且在某个地方把 a = 3,那么 a.xxx 就会让程序崩溃了。而这种非常隐晦但是低级的错误在强类型的语言例如 C/C++、Java 中是不可能发生的,这些代码连编译都不可能通过,也别妄图运行。大型原创 2020-07-01 23:39:46 · 374 阅读 · 0 评论 -
react学习记录-ref和React.js的DOM操作
文章目录ref 和 React.js 中的 DOM 操作课后习题ref 和 React.js 中的 DOM 操作React.js 并不能完全满足所有 DOM 操作需求,有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框,你需要调用 input.focus() 的 DOM API,比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画,等等。React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上原创 2020-06-27 01:22:27 · 335 阅读 · 0 评论 -
react学习记录-更新阶段的组件生命周期
更新阶段的组件生命周期关于更新阶段的组件生命周期:shouldComponentUpdate(nextProps, nextState):你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。componentWillReceiveProps(nextProps):组件从父组件接收到新的 props 之前调用。componentWillUpdate():组件开始重新渲染之前调用。componentDidUpdate原创 2020-06-27 01:21:16 · 150 阅读 · 0 评论 -
react学习记录-挂载阶段的组件生命周期
文章目录挂载阶段的组件生命周期constructor()、componentWillMount()、componentDidMount()componentWillUnmount()各个生命周期函数的具体使用场合课后习题挂载阶段的组件生命周期之前提到过我们定义的组件实际上等价于React.createElement 函数,它会将返回结果传给 ReactDOM.render。过程如下:// <Header /> ===> React.createElement(Header, null原创 2020-06-27 01:19:29 · 397 阅读 · 0 评论 -
react学习记录-状态提升
文章目录前端应用状态管理 —— 状态提升课后习题前端应用状态管理 —— 状态提升我们在使用state存放数据的时候,应当倾向于把数据放在父组件上,这是为了在父组件下的兄弟组件都在依赖或者影响这个数据的时候,能够进行共享。避免让两个子孙组件分别取得两个数据的备份,造成通信的障碍或者说不同步。我们把数据交给父组件,使得它的子孙组件都能通过props获取到数据的这种方式,叫做“状态提升”。总结一下:当某个状态被多个组件依赖或者影响的时候,就把该状态提升到这些组件的最近公共父组件中去管理,用 props 传原创 2020-06-27 01:18:50 · 202 阅读 · 0 评论 -
react学习记录-渲染列表数据
文章目录渲染列表数据渲染存放 JSX 元素的数组使用 map 渲染列表数据课后习题渲染列表数据在使用 React.js 处理列表数据的时候,需要掌握一些规则。渲染存放 JSX 元素的数组假设现在我们有这么一个用户列表数据,存放在一个数组当中:const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: '原创 2020-06-27 01:17:35 · 298 阅读 · 0 评论 -
react学习记录-state vs props
文章目录state vs props鼓励无状态组件state vs propsstate的主要作用,是用于组件保存、控制、修改自己的可变状态。一言概之,它在组件内部初始化、只能被组件自身修改,外部不能访问也不能修改。所以state是一个局部的、只能被组件自身控制的数据源,它的更新方式上通过setState,同时setState会导致组件的重新渲染。props的主要作用则是让组件的父组件可以传入一些配置参数,去定制该子组件。它从外部传入,组件内部无法控制也无法修改。除非组件外部主动传入新的props,原创 2020-06-27 01:16:55 · 182 阅读 · 0 评论 -
react学习记录-配置组件的props
文章目录配置组件的props默认配置(defaultProps)props是单向的(不可变)小结课后习题配置组件的props组件根据不同的使用场合要进行个性化配置,React.js的props就是起到这个作用。每个组件都可以接受一个props参数,它是一个对象,包含你对组件的所有配置,以点赞按钮为例:class LikeButton extends Component { constructor () { super() this.state = { isLiked: false原创 2020-06-27 01:16:09 · 254 阅读 · 0 评论 -
react学习记录-组件的state和setState
文章目录组件的state和setStatesetState 接受对象参数setState 接受函数参数关于setState的合并课后练习组件的state和setStatesetState 方法由父类 Component 所提供。当我们调用这个函数的时候,React.js 会更新组件的状态 state ,并且重新调用 render 方法,然后再把 render 方法所渲染的最新的内容显示到页面上。注意,当我们要改变组件的状态的时候,不能直接用 this.state = xxx 这种方式来修改,如果这样做原创 2020-06-25 23:54:02 · 275 阅读 · 0 评论 -
react学习记录-事件监听
文章目录事件监听React中的event 对象关于事件中的this课后习题事件监听在 React.js 不需要手动调用浏览器原生的 addEventListener 进行事件监听。React.js 帮我们封装好了一系列的 on* 的属性,当你需要为某个元素监听某个事件的时候,只需要简单地给它加上 on* 就可以了。而且你不需要考虑不同浏览器兼容性的问题,React.js 都帮我们封装好这些细节了。要注意的是,这些事件属性名都必须要用驼峰命名法。React中的event 对象事件监听函数会被自动传入原创 2020-06-25 23:48:27 · 858 阅读 · 0 评论 -
react学习记录-组件组合、嵌套和组件树
文章目录组件的组合、嵌套和组件树课后习题组件的组合、嵌套和组件树我们定义了Title和Header两个组件,并将Title置入Header组件当中,语法如下:class Title extends Component { render () { return ( <h1>React 小书</h1> ) }}class Header extends Component { render () { return (原创 2020-06-25 23:36:34 · 215 阅读 · 0 评论 -
react学习记录-组件的render方法
文章目录组件的render方法只能返回一个JSX表达式插入条件返回JSX元素变量课后习题组件的render方法React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component,并为这个组件子类实现一个render方法,这个render方法必须要返回一个JSX元素。只能返回一个JSX需要注意的是,返回多个并列的JSX元素是不合法的,我们需要用一个外层的JSX元素将它们包裹起来:原创 2020-06-25 23:35:11 · 916 阅读 · 0 评论 -
react学习记录-类组件化理解
迫于生存压力开始补充(系统)学习React,参考了React.js小书的学习进程进行探索,记录一下我的学习思考,争取端午啃完它React.js 简单认识React.js似乎更加强调界面的组件化,比如说JSX的书写方式,类组件等等,都带着组件化的思维。在使用vue的时候,虽然有使用组件化的思想去构建界面,但无非就是模块化组件的代码,然后分别引入而已。尤其在做组件通信的时候,是会感觉到vue的一个组件化其实很不明显,通信机制也是比较麻烦的(在父子通信、兄弟通信和生命周期函数面前反复狗带)。相信Reac.原创 2020-06-25 23:31:21 · 178 阅读 · 0 评论