React组件开发

目录：

1. 属性：props
2. 内联样式
3. 状态记忆 : state
4. 生命周期
5. 访问DOM
6. 表单输入

承接快速入门篇：http://www.cnblogs.com/jasonnode/p/4444504.html

属性 : props

组件应该提供一些属性供开发者在不同的场景下可以对组件实例元素的行为 外观进行调整，这样可以提高组件的利用效率。

在React中，使用props字段访问实例元素的属性。

例如，在下面的JSX片段中，EzLampComp组件的实例元素有一个属性onoff：

1. React.render(
   <ezlampcomp onoff="off"></ezlampcomp> ,
   document.querySelector("#content"));

那么在EzLampComp组件的实现中，我们可以通过props字段访问这个属性， 并根据属性值设置其样式类。

在JSX中，我们也可以将一个JavaScript表达式赋给React元素的属性，这时需要 使用一对大括号来代替引号：

1. var myOnoff = "on";
   React.render(
   <ezlampcomp onoff="{myOnoff}"></ezlampcomp>,
   document.querySelector("#content"));

    

如果你觉得不好理解，那么我们把上面的JSX代码转换成JavaScript：

1. var myOnoff = "on";
   React.render(
   React.createElement(
   EzLampComp,
   {
   onoff : myOnoff
   }),
   document.querySelector("#content"));

    

内联样式

在前面的示例中，每当需要设定元素的样式，我们总是使用样式类。但有时我们的确需要 直接在元素上声明内联样式，就像在HTML中一样：

1. //HTML
   <div style="width:200px;height:200px;"></div>

    

在React元素中声明样式，需要给出一个JSON对象，其字段对应样式名称，比如要渲染出 上面的HTML片段，需要这样：

1. var myStyle = {
   width:"200px",
   height:"200px"
   };
   //JSX
   var e = <div style="{myStyle}"></div>;
   //JavaScript
   var e = React.createElement(
   "div",{
   style : myStyle
   });
   //render
   React.render(e,...);

    

• 注意1 - 对应样式名称的字段，需要使用驼峰式命名

比如：border-radius样式需要使用borderRadius来访问，而background-image 样式需要使用backgroundImage来访问。

• 注意2 - 样式名称中的供应商前缀，除ms外都需要大写首字母

对于供应商前缀（-webkit, -moz, -o, -ms），除了ms，其他都需要将首字母大写。 比如：-webkit-transition应当通过WebkitTransition来访问，然而-ms-transition 则需要通过msTransition来访问。

 

状态记忆 : state

很多情况下，组件实例的外观及行为通过使用props变量进行定制就可以了。 这样的组件我们称之为无状态/stateless的组件，因为在任何时刻，组件 实例的表现都仅仅取决于外部传入的props属性，与 它自身之前的表现毫无关系，即，它本身没有任何记忆。

让一个组件拥有记忆能力，意味着它不仅能对外界的刺激产生反应（通过props 传入的数据、或用户的交互事件），也能根据自身的状态对同样的刺激做出 不同的反应。

比如示例中的切换开关，它可以响应用户的点击事件，如果当前状态是关，那么它就 切换到开的状态（显示开状态的图片）；而如果当前状态是开，那么它就切换到关的 状态（显示关状态的图片）：

现在思考一下，使用props可以实现这个切换开关吗？

React的组件的确引入了状态机的概念，通过将组件划分为不同的状态，使组件具有 了一定的记忆能力：

• state - 组件的状态变量

每个React组件实例都有一个state变量，用来保存组件的当前状态。可以在 任何时刻使用this.state读取当前状态。

• getInitialState() - 设置组件初始状态

组件的实现者应当实现一个getInitialState()方法来设置组件的初始状态。 getInitialState()方法必须返回一个JSON对象或空值null， 这意味着即使你只需要一个简单的标志作为状态，比如true或false，也要把它放到JSON对象里。

• setState(currentState) - 设置组件当前状态

尽管可以使用this.state来直接设置组件当前状态，但React要求我们使用 setState()方法来进行状态设置。这是因为，setState()方法会自动 地重新渲染组件，而这通常是我们所期望的。

参数currentState是一个JSON对象，不必包含状态变量的所有字段，setState()方法会 将这个参数值与当前状态this.sate进行合并，结果作为状态变量的新值。

 

生命周期

在组件实例的整个周期中，React将在特定的时间点调用以下方法：

• componentWillMount() - 组件实例即将挂接（初次渲染）时被调用

这个方法在整个生命周期中只会被调用一次。

• componentDidMount() - 组件实例挂接（初次渲染）后被调用

这个方法在整个生命周期中只会被调用一次。

• componentWillReceiveProps(nextProps) - 组件实例即将设置新属性时被调用

参数nextProps表示即将应用到组件实例上的新属性值。

这个方法在初次渲染时不会被调用。在此方法内调用setState()不会引起重新渲染。

• shouldComponentUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用

参数nextProps传入即将应用到组件实例上的新属性值，参数nextState传入组件实例即将被 设置的状态值。如果这个方法返回false，那么组件实例就不会被重新渲染。除非我们明确地 知道，新的属性和状态不需要进行重新渲染，否则这个方法都应该返回true。

这个方法在初次渲染时或通过forceUpdate()方法进行渲染时不会被调用。

• componentWillUpdate(nextProps, nextState) - 组件实例即将重新渲染时被调用

这个方法在初次渲染时不会被调用。注意：不能在此方法内调用setState()。

• componentDidUpdate(prevProps, prevState) - 组件实例重新渲染后被调用

这个方法在初次渲染时不会被调用。

• componentWillUnmount() - 组件实例即将从DOM树移除时被调用

这个方法在整个生命周期中只会被调用一次。

 

访问DOM

在React中，有时需要直接访问React元素对应的DOM对象，比如读取用户的输入。 这需要两个步骤：

• 设置React元素的ref属性

如果需要在代码中访问某个React元素的DOM对象，那么首先需要设置这个React 元素的ref属性。

比如，我们需要读取文本输入框的值，那么首先给这个input元素指定ref属性：

1. //JSX
   <input type="text" defaultvalue="beijing" ref="q" placeholder="请输入城市拼音，如：beijing">

声明了React元素的ref属性之后，可以通过this.refs对象访问 这个组件，比如上面的示例中：this.refs.q指向input组件对象，你应该已经注意到， 我们为React元素设置的ref属性值，在这里被用为this.refs对象的键值。

• 获得DOM对象

在设置了React元素的ref属性后，可以使用React.findDOMNode()方法获得对应的 DOM对象：

1. React.findDOMNode(component)

参数component是一个React组件对象，如前所述，我们可以通过this.refs对象获得。

如果React元素已经渲染到DOM树上，findDOMNode()方法将返回组件对象对应的DOM节 点对象，后续就可以使用标准的DOM API操作这个DOM对象了。

 

表单输入

在React中，表单输入元素如 input, textarea, option等，和其他标准的HTML元素 相比需要特殊的注意：

• 文本输入框

不要使用value属性设置文本输入框元素的初值，应当使用defaultValue：

1. //JSX
   <input type="text" defaultvalue="demo">

• 复选按钮

不要使用checked属性设置复选按钮的初始选中状态，应当使用defaultChecked：

1. //JSX
   <input type="checkbox" defaultchecked="">

• 单选按钮组

不要使用option元素的selected属性设置单选按钮组的初始选中状态，应当使用 select元素的defaultValue：

1. //JSX
   <select defaultvalue="A">
   <option value="A">China</option>
   <option value="B">India</option>
   <option value="C">Japan</option>
   </select>

在  示例代码 中添加一个要登入系统的选择框，使其看起来像这样：

可选的系统有：OA、财务、人力资源 。 默认选中人力资源。

 参考资料：course/552762019964049d1872fc88/