本文共 1849 字，大约阅读时间需要 6 分钟。

React 学习总结–基础（二）

说明

• React 版本："15.4.1"
• react-tap-event-plugin 版本："^2.0.1"

1. 数据流

React 的数据流是单向的，从父节点传递到子节点。组件通过 props 从父节点获取数据，内部状态通过 state 管理。每个 React 组件都可以看作是一个状态机，仅在组件内部修改状态，通过 setState 方法触发重渲染。

Props（属性）

Props 是组件接收的属性，可以传递任意类型的数据。组件挂载时可设置 props，子组件无法直接修改 props，只能通过父组件传递。

State（状态）

React 组件可以维护自己的状态，通过 setState 方法修改状态，触发 UI 重新渲染。状态机的初始状态通过 getInitialState 提供。

PropTypes（属性验证）

PropsTypes 用于验证组件接收的属性是否有效，开发环境下可以启用，避免传入无效数据。

2. 事件处理

React 事件处理与 JavaScript 一致，使用驼峰式命名。事件对象经过封装，支持标准化事件处理和浏览器兼容。

事件捕获处理

默认事件处理在冒泡阶段触发，捕获事件需使用 onClickCapture。

虚拟事件对象

React 事件对象提供浏览器兼容性属性，支持 stopPropagation、preventDefault 等方法。

触摸事件

新版本 React 无需初始化触摸事件，引入 react-tap-event-plugin 后需调用 injectTapEventPlugin。

3. 复合组件

复合组件通过组合多个功能模块实现一个完整的组件。子组件可通过 this.props.children 访问。

子级组件

Parent 组件可通过 this.props.children 读取子级组件。

4. Mixin

Mixin 提供共享功能模块，防止静默函数覆盖。通过 React.createClass 定义 Mixin，组件可继承多个 Mixin。

5. DOM 操作

React 提供 DOM 操作 API，用于在组件生命周期特定阶段操作 DOM。ref 属性用于获取真实 DOM 节点。

ref 属性

class Test extends Component {  constructor(props) {    super(props);    this.state = { value: '' };  }  handleClick() {    const textInput = ReactDOM.findDOMNode(this.refs.text);    console.log(textInput);  }  handleChange(e) {    this.setState({ value: e.target.value });  }  render() {    return (      
   
        
            
    获取输入内容      
   
    );  }}

6. 表单

表单组件支持用户交互，常用属性包括 value、checked、selected 等。

无约束组件

无约束组件的值由表单元素控制，默认值可通过 defaultValue 设置。

约束组件

约束组件的值由 React 组件控制，通过 state 存储并更新。

文本框和 Select

React 提供一致性 API，支持 textarea 和 select 组件。

单选框和复选框

通过 state 控理 checkbox 组件的状态。

7. 常用 API

ReactDOM.unmountComponentAtNode

销毁指定容器内的 React 节点。

React.isValidElement

判断对象是否为 React 组件。

React.cloneElement

克隆 React 元素，保留 props、ref 和 key。

React 遍历

使用 React.Children.map 遍历组件树。

forceUpdate

手动触发 render 方法。

注意事项

• 避免使用 replaceState、isMounted 等已弃用 API。
• 使用 ES6 替代 Mixin。

下一篇–React-Router

• API 及常用方法

转载地址：http://lkvoz.baihongyu.com/