React入门

2016-10-29 15:43:43   0  举报





仅支持查看

AI智能生成

React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。它专注于组件化开发，使得代码更加模块化、可复用和易于维护。通过使用虚拟DOM技术，React可以在不重新渲染整个页面的情况下更新部分组件，提高了应用的性能。此外，React还支持服务器端渲染，使得首屏加载速度更快。入门React需要学习JSX语法、组件生命周期、状态管理等基本概念。随着实践的深入，可以掌握更高级的技术和框架，如Redux、React Router等。总之，React为开发者提供了一个强大且灵活的工具集，帮助他们快速构建高性能、可扩展的Web应用。

模版推荐

作者其他创作

大纲/内容

组件

模块化

可组装

React.createClass()

创建一个新的REACT组件

render

返回一颗REACT组件树，渲染成HTML

ReactDOM.render()

只在复合组件被定义后调用

React.createElement(tagName)

Props

从父组件传来的数据在子组件李作为属性使用

通过this.props的keys读取父组件传给子组件的数据

不可变，从父级传来并被父级拥有

state

this.state是组件私有的

通过调用this.setstate()改变它

每次state更新，组件就重新渲染自己

getInitialState()

<p style="box-sizing: border-box; border: none; margin: 10px 0px; padding: 0px; color: rgb(72, 72, 72); font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: medium; background-color: rgb(249, 249, 249);">在生命周期里只执行一次，并设置组件的初始状态。<div> </div><h4 style="box-sizing: border-box; border: none; margin: 10px 0px; padding: 0px; font-family: proxima-nova, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: bold; line-height: 20px; color: rgb(72, 72, 72); text-rendering: optimizeLegibility; font-size: medium; background-color: rgb(249, 249, 249);"><a class="anchor" name="更新状态" style="box-sizing: border-box; border: none; margin: -50px 0px 0px; padding: 0px; color: rgb(192, 91, 77); position: absolute;"></a></h4>

componentDidMount

子主题

轮询

websockets

preventDefault()

子主题

我们在父组件的<code style="box-sizing: border-box; border: none; margin: 0px; padding: 1px 3px; font-family: source-code-pro, Menlo, Consolas, "Courier New", monospace; line-height: 1.5; color: rgb(85, 85, 85); background-color: rgba(0, 0, 0, 0.0392157);">render</code>方法中以传递一个新的回调函数（<code style="box-sizing: border-box; border: none; margin: 0px; padding: 1px 3px; font-family: source-code-pro, Menlo, Consolas, "Courier New", monospace; line-height: 1.5; color: rgb(85, 85, 85); background-color: rgba(0, 0, 0, 0.0392157);">handleCommentSubmit</code>）到子组件完成这件事，绑定它到子组件的 <code style="box-sizing: border-box; border: none; margin: 0px; padding: 1px 3px; font-family: source-code-pro, Menlo, Consolas, "Courier New", monospace; line-height: 1.5; color: rgb(85, 85, 85); background-color: rgba(0, 0, 0, 0.0392157);">onCommentSubmit</code> 事件上。无论事件什么时候触发，回调函数都将被调用：

子主题

bind(this)

使用教程