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 (      
           
            
          
   
    );  }}