作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson12 转载请注明出处,保留原文链接和作者信息. 我们来一个关于 state 和 props 的总结. state 的主要作用是用于组件保存.控制.修改自己的可变状态.state 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改.你可以认为 state 是一个局部的.只能被组件自身控制的数据源.state 中状态可以通过 this.setState 方法进行更新,setState…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层结构形式,然后你可以往里面塞任意的内容.这种结构在实际当中非常常见,例如这种带卡片组件: 组件本身是一个不带任何内容的方形的容器,我可以在用这个组件的时候给它传入任意内容: 基于我们目前的知识储备,可以迅速写出这样的代码: class Card extends Component { render…

我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151617181920 ...class extends Component { static childContextTypes = { store: PropTypes.object } getChildContext () { return { store } } render () { retu…

React.js 小书 Github 关于作者 这是一本关于 React.js 的小书. 因为工作中一直在使用 React.js,也一直以来想总结一下自己关于 React.js 的一些知识.经验.于是把一些想法慢慢整理书写下来,做成一本开源.免费.专业.简单的入门级别的小书,提供给社区.希望能够帮助到更多 React.js 刚入门朋友. 由于水平有限,编写的过程难免会有诸多错误,也希望大家在看的过程中发现了问题,可以在 Github 上给该项目发 Pull Request.衷心希望可以有更多的人…

(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成了我们的页面. react.js 不是一个框架,它只是一个库.它只提供 UI (view)层面的解决方案.在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux.React-router 等来协助提供完整的解决方法. 组件化可以帮助我们解决前端结构的复用性问题,整个页面可以…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson25 转载请注明出处,保留原文链接和作者信息. (本文未审核) 目前为止,第二阶段知识已经基本介绍完,我们已经具备了项目上手实战必备的 React.js 知识,现在可以把这些知识应用起来.接下来是实战环节,我们会继续上一阶段的例子,把评论功能做得更加复杂一点. 我们在上一阶段的评论功能基础上加上以下功能需求: 页面加载完成自动聚焦到评论输入框. 把用户名持久化,存放到浏览器的 LocalSt…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson26 转载请注明出处,保留原文链接和作者信息. (本文未审核) 持久化评论 同样地,可以通过类似于用户名持久化的方式对评论列表内容进行持久化,让用户发布的评论在刷新页面以后依然可以存在.修改 src/CommentApp.js: class CommentApp extends Component { constructor () { super() this.state = { comme…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 React.js 组件开发中也非常常用,但是它们也很简单. dangerouslySetHTML 出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 text(…) 函数一样,任何的 HTML 格式都会被转义掉: cl…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ReactDOM.render( <Header />, document.getElementById('root') ) 会编译成: ReactDOM.render( React.createElement(Header, null), document.getElementById('ro…

作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个地方感到疑惑: CommentList中显示的评论列表数据为什么要通过父组件 CommentApp 用 props 传进来?为什么不直接存放在 CommentList 的 state 当中?例如这样做也是可以的: class CommentList extends Component { const…