react的官方文档

最近在看react的文档

我觉得有助于其他的开发理解

文档地址：

http://www.css88.com/react/docs/components-and-props.html

在文档中药注意的一些规则

propos的概念

组件名大写

组件必须是纯函数

扫描二维码关注公众号，回复： 2496159 查看本文章

类组价的表现形式：

class Clock extends React.Component {

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.props.date.toLocaleTimeString()}.</h2>

</div>

);

}

}

所谓的生命周期

基本是同vue中的的生命周期是一致的

关于状态的问题：

改组件上的状态，是不能被拥有并设置它的组件 以外的任何组件访问。

一个组件可以选择将 state(状态) 向下传递，作为其子组件的 props(属性)：

即所谓的数据向下流动

关于绑定事件注意的

React事件绑定属性的命名采用驼峰式写法，而不是小写。

关于this 的重新绑定：如果你忘记绑定 this.handleClick

；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this。

有个地方看不懂了

https://codepen.io/anon/pen/bjGopO?editors=0010

最后的{button}

关于大括号里面的表达式问题：

JSX允许在大括号中嵌入任何表达式，

这么做有时可以使你的代码更清晰，但有时这种风格也会被滥用。就像在JavaScript中一样，何时需要为了可读性提取出一个变量，这完全取决于你。但请记住，如果一个map()嵌套了太多层级，那可能就是你提取出组件的一个好时机。

编辑本页面

关于表单的事情：

<input type="text">, <textarea>, 和 <select> 都十分类似 - 他们都通过传入一个value属性来实现对组件的控制

例子：

<input type="text" value={this.state.value} onChange={this.handleChange} />

<textarea value={this.state.value} onChange={this.handleChange} />

<select value={this.state.value} onChange={this.handleChange}>

<option value="grapefruit">Grapefruit</option>

<option value="lime">Lime</option>

<option value="coconut">Coconut</option>

<option value="mango">Mango</option>

</select>

状态提升的概念：原则

在React中，状态分享是通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升