PDF《1.1 react基本概念》

5 React 组件的创建 组件(Component)是 React 最强大的功能之一.React 中都是关于模块化、可组装的组件,组件可以封装可复用的代码,使开发更高效.这里总结 React 组件的三种写法,以及相应的使用场景. 无状态函数式组件(Stateless Functional Component) function Hello(props) { return ( div>

Hello, {props.name} );

} // Arrow Function const Hello = (props) =>

{ const {name} = props;

// 属性较多时可以先取出,不用每个属性都加上 props return ( Hello, {name}! );

};

// use 正如其名字所表达的一样,这一类组件没有自身的状态,只根据传入的 props 进行相应的渲染.这种写法是官方极为推崇的,如果一个组件不涉及到 state 状 态的操作,且用不到生命周期函数,建议把它写成无状态函数式组件. 这一类组件十分简洁,相同的输入一定对应相同的输出,且不会产生任何副作用.在大型项目中,无状态组件会搭配高阶组件使用,高阶组件托管 state ,无状态 函数组件则负责具体的页面渲染. 但是无状态组件不支持 ref ,而 React 自身就提醒要避免使用 ref ,所以无状态组件在大多是情况下都是很好的选择. ES5 写法(React.createClass) var Hello = React.createClass({ getDefaultProp:function() { return { name: '

World'

} }, render: function () { return ( div>

Hello, {this.state.name}! } });

这是 React 最开始推荐的组件写法,是用 ES5 的原生 JavaScript 来实现的 React 组件.这类组件接受一个对象为参数,对象中的 render 方法返回一个 组件实例.但是随着 React 的发展,这种写法已经渐渐不适用了. ES6 写法(React.Component) 1.1.2 React 组件的创建

6 import React, {Component} from '

react'

;

class Hello extends Component { constructor(props) { super(props);

this.state = { name: '

World'

this.onClick=this.onClick.bind(this) } onClick() { do something } render() { return ( div onClick={this.onClick}>

Hello, {name}! } } export default Hello;

这是目前官方推荐的有状态组件的写法,使用 ES6 的语法来创建组件.使用这种方式创建组件时, React 并没有对内部的函数进行 this 绑定,如果想要在 函数回调时保持正确的 this,就要手动对函数进行 this 绑定.如例子中的 onClick ,在构造函数中绑定了 this . React 团队已经声明 React.createClass 最终会被 React.Component 的 类形式所取代,所以在实际的开发中,能用 React.Component 创建的组件 的就尽量不用 React.createClass 形式创建组件. 1.1.2 React 组件的创建

7 1.1.3 React 数据流

8 ### state state(状态):负责维护组件内部的状态.通过`steState`方法修改`state`(直接修改 `this.state`无效),继而重新渲染用户界面. ### 初始化state ``` //ES5 var MyComponent=React.createClass({ //使用getInitialState 方法创建 getInitialState: function() { return { loopsRemaining: this.props.maxLoops, };

} } //ES6 class MyComponent extends React.Component{ constructor(){ super() //在constructor中的super()后创建 this.state={ } } } 1.1.3 React 数据流

9 //ES6 class MyComponent extends React.Component{ //直接创建一个state对象 state={ } } ``` ### staState #### 用法一 `setState(states,callback)` 接收两个参数.第一个以一个对象的形式传入用于合并组件内部 的`state`(如果之前有定义那么覆盖,没有定义就新建),第二个参数为当前的state改变完成 后的回调(一般很少用到). `setState` `不是同步更新`,而是`异步更新`的.`React`会将多个`steState`缓存起来,然后 一次性更新. 举个例子: ``` changeName this.steState({ firstName: 你好, }) this.steState({ lastName: 世界 }) } 1.1.3 React 数据流