Ch03 React/JSX/Component 簡介

Facebook 自己有提供 Test Utilities，但因为不够好用，因此目前主流开发社群比较倾向使用 Airbnb 团队开发的 enzyme，其能够与市面上常见的测试工具（Mocha、Karma、Jest 等）搭配使用。其中 Jest 是 Facebook 所开发的单元测试工具，其主要基于 Jasmine 所创建的测试框架。Jest 除了支援 JSDOM 外，也能够自动模拟 (mock) 透过 require() 进来的模组，让开发者能够更专一在目前被测试的模组中。

Component PropType 防呆机制

在 React 设计时除了提供 props 预设值设定（Default Prop Values）外，也提供了 Prop 的验证（Validation）机制，让整个 Component 设计更加稳健：

//  注意组件开头第一个字母都要大写class MyComponent extends React.Component {
        // render 是 Class based 组件惟一必须的方法（method）
        render() {
                return (
                        <div>Hello, World!</div>
                );
        }
}

// PropTypes 验证，若传入的 props type 不符合将会显示错误MyComponent.propTypes = {
  todo: React.PropTypes.object,
  name: React.PropTypes.string,
}

// Prop 预设值，若对应 props 没传入值将会使用 default 值MyComponent.defaultProps = {
 todo: {}, 
 name: '', 

}

 

 

 

 

 

Component 就像个状态机（State Machine），并且也有生命周期（Life Cycle）

Component 就像个状态机（State Machine），根据不一样的 state（透过  setState() 修改）和 props（由父元素传入），Component 会出现对应的显示结果。而人有生老病死，组件也有生命周期。透过操做生命周期处理函数，能够在对应的时间点进行 Component 须要的处理，关于更详细的组件生命周期介绍咱们会再下一个章节进行更一步说明。

 

一概重绘（Always Redraw）和单向资料流（Unidirectional Data Flow）

在 React 世界中，props 和 state 是影响 React Component 长相的重要要素。其中 props 都是由父元素所传进来，不能更改，若要更改 props 则必须由父元素进行更改。而 state 则是根据使用者互动而产生的不一样状态，主要是透过 setState() 方法进行修改。当 React 发现 props 或是 state 更新时，就会重绘整个 UI。固然你也可使用 forceUpdate() 去强迫重绘 Component。而 React 透过整合 Flux 或 Flux-like（例如：Redux）能够更具体实现单向资料流（Unidirectional Data Flow），让资料流的管理更为清晰。

 

 

 

 

 

 

在 JavaScript 里写 CSS：Inline Style

在 React Component 中 CSS 使用 Inline Style 写法，全都封装在 JavaScript 当中：

const divStyle = {
  color: 'red',
  backgroundImage: 'url(' + imgUrl + ')',
};

ReactDOM.render(<div style={divStyle}>Hello World!</div>, document.getElementById('app'));

React 思路认为使用 Component 比起模版（Template）和显示逻辑（Display Logic）更能实现关注点分离的概念，而搭配 JSX 能够实现声明式  Declarative（注重 what to），而非命令式  Imperative（注重 how to）的程式撰写方式：

 

以 Facebook 上面按赞功能来讲，如果命令式 Imperative 写法大约会是长这样：

if(userLikes()) {
  if(!hasBlueLike()) {
    removeGrayLike();
    addBlueLike();
  }
} else {
  if(hasBlueLike()) {
    removeBlueLike();
    addGrayLike();
  }
}

如果声明式 Declarative 则是会长这样：

if(this.state.liked) {
  return (<BlueLike />);
} else {
  return (<GrayLike />);

}

 

 

js中map函数

 

 

map 方法能够方便的迭代数组,map 方法会迭代数组中的每个元素，并根据回调函数来处理每个元素，最后返回一个新数组。注意，这个方法不会改变原始数组。

在咱们的例子中，回调函数只有一个参数，即数组中元素的值 (val 参数) ，但其实，你的回调函数也能够支持多个参数，譬如：元素的索引index、原始数组arr。

使用 map 方法来为 oldArray 中的每一项增长3，而且在 newArray 中保存它们。 oldArray 不该该被改变。

代码:

var oldArray = [1,2,3,4,5];

var newArray = oldArray.map(function(val){return val+3;});

 

 

3. 转换成 JavaScript

JSX 最终会转换成浏览器能够读取的 JavaScript，如下为其规则：

React.createElement(
  string/ReactClass, // 表示 HTML 元素或是 React Component
  [object props], // 属性值，用物件表示
  [children] // 接下来参数皆为元素子元素
)

解析前（特别注意在 JSX 中使用 JavaScript 表达式时使用 {} 括起，以下方范例的 text，里面对应的是变数。若需但愿放置通常文字，请加上 ''）：

var text = 'Hello React';
<h1>{text}</h1><h1>{'text'}</h1>

解析完后：

var text = 'Hello React';
React.createElement("h1", null, "Hello React!");

另外要特别要注意的是因为 JSX 最终会转成 JavaScript 且每个 JSX 节点都对应到一个 JavaScript 函数，因此在 Component 的  render 方法中只能回传一个根节点（Root Nodes）。例如：如有多个  <div> 要  render 请在外面包一个 Component 或  <div>、 <span> 元素

5. 属性

在 HTML 中，咱们能够透过标签上的属性来改变标签外观样式，在 JSX 中也能够，但要注意  class 和  for 因为为 JavaScript 保留关键字用法，所以在 JSX 中使用  className 和  htmlFor 替代。

class HelloMessage extends React.Component {
  render() {
    return (
      <div className="message">
        <p>Hello React!</p>
      </div>
    );
  }
}

Boolean 属性

在 JSX 中预设只有属性名称但没设值为 true，例如如下第一个 input 标签 disabled 虽然没设值，但结果和下面的 input 为相同：

<input type="button" disabled />;
<input type="button" disabled={true} />;

反之，如果没有属性，则预设预设为 false：

<input type="button" />;

<input type="button" disabled={false} />;

 

 

6. 扩展属性

在 ES6 中使用 ... 是迭代物件的意思，能够把全部物件对应的值迭代出来设定属性，但要注意后面设定的属性会盖掉前面相同属性：

var props = {
  style: "width:20px",
  className: "main",
  value: "yo", 
}

<HelloMessage  {...props} value="yo" />

// 等于如下React.createElement("h1", React._spread({}, props, {value: "yo"}), "Hello React!");

 

7. 自定义属性

如果但愿使用自定义属性，可使用 data-：

<HelloMessage data-attr="xd" />

 

8. 显示 HTML

一般为了不资讯安全问题，咱们会过滤掉 HTML，若须要显示的话可使用：

<div>{{_html: '<h1>Hello World!!</h1>'}}</div>

 

9. 样式使用

在 JSX 中使用外观样式方法以下，第一个 {} 是 JSX 语法，第二个为 JavaScript 物件。与通常属性值用 - 分隔不一样，为驼峰式命名写法：

<HelloMessage style={{ color: '#FFFFFF', fontSize: '30px'}} />

 

10. 事件处理

事件处理为前端开发的重头戏，在 JSX 中透过 inline 事件的绑定来监听并处理事件（注意也是驼峰式写法），更多事件处理方法请参考官网

<HelloMessage onClick={this.onBtn} />