xwp 5 react核心语法 - nuanxin1111/react GitHub Wiki

##交互属性

表单组件支持几个受用户交互影响的属性:

value,用于 <input>、<textarea> 组件。
checked,用于类型为 checkbox 或者 radio 的 <input> 组件。
selected,用于 <option> 组件。

在 HTML 中,<textarea> 的值通过子节点设置;在 React 中则应该使用 value 代替。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时,onChange 执行并通过浏览器做出响应:

<input> 或 <textarea> 的 value 发生变化时。
<input> 的 checked 状态改变时。
<option> 的 selected 状态改变时。

和所有 DOM 事件一样,所有的 HTML 原生组件都支持 onChange 属性,而且可以用来监听冒泡的 change 事件。

组件生命周期

组件的生命周期包含三个主要部分:

挂载: 组件被插入到DOM中。
更新: 组件被重新渲染,查明DOM是否应该刷新。
移除: 组件从DOM中移除。

React提供生命周期方法,你可以在这些方法中放入自己的代码。我们提供will方法,会在某些行为发生之前调用,和did方法,会在某些行为发生之后调用。

挂载

getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法,返回初始的state数据。
componentWillMount()在挂载发生之前立即被调用。
componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。

更新

componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较    this.props和nextProps,然后使用this.setState()来改变state。
shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数,优化this.props和nextProps,以及this.state和nextState的比较,如果不需要React更新DOM,则返回false。
componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。
componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。

移除

componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。


react语法

React.render() 实例化根组件,启动框架,注入标记到原始的 DOM 元素中,作为第二个参数提供。

每一个组件都根据自己的 props 渲染了自己一次。props 是不可变的:它们从父节点传递过来,被父节点“拥有”。

state可改变,this.state 是组件私有的,可以通过调用 this.setState() 来改变它。当状态更新之后,组件重新渲染自己。

一个限制: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们必须被包含在同一个节点里。

如果需要在手机或平板等触摸设备上使用 React,需要调用 React.initializeTouchEvents(true); 启用触摸事件处理。

常用的模式是创建多个只负责渲染数据的无状态(stateless)组件,在它们的上层创建一个有状态(stateful)组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑,而这些无状态组件则负责声明式地渲染数据。

子组件状态管理,多数情况下,可以通过隐藏组件而不是删除它们

⚠️ **GitHub.com Fallback** ⚠️