Light Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Latest commit

History

History
382 lines (304 loc) * 11.6 KB

custom-components.md

File metadata and controls

382 lines (304 loc) * 11.6 KB

Kai Fa React Zi Ding Yi Zu Jian

1. Qian Yan

Zai React Chu Lai Zhi Qian ,Yi You Wu Shu Qian Duan Kuang Jia Huo Ku Dan Sheng ,Gong Neng Fei Chang Qiang Da , Ye Fei Chang Hao Yong ,Ban Sui Zhao Wo Men Qian Duan Kai Fa Ren Yuan Zou Guo Yi Nian You Yi Nian . Dan Wei Shi Yao React Yi Chu ,Shou Dao Guo Nei Wai Re Peng ,Ta Dao Di Jie Jue Liao Qian Duan Na Xie Tong Dian ? Ge Ren Li Jie You Ru Xia Liang Dian :

  • Web Component
  • Virtual DOM

1.1 Web Component

Web Component Shi Yi Ge Gai Nian ,Qi Shi Jiu Zao Yi Chu Xian . Zao Zai HTML 4.0 Shi Dai ,Wo Men Zai Ye Mian Shi Yong include Yu Fa Lai Fu Yong header He footer Li . Dan Wu Fa Gei Zhe Chong component Chuan Can ,Geng Bie Tan Yue Shu He Yan Zheng Can Shu Liao ,Shao Wei You Bu Tong Chang Jing ,Wo Men Bu De Bu Fu Zhi Yi Fen component Gai Gai Hou Zai Yong ,Zai Xiang Mu Zhong Hui Jiu Chu Xian Lei Si Yu header1.html, header2.html He header3.html Wen Jian ,Fu Yong Lu He Chou Xiang Cheng Du Du Jiao Di .

Dan React De Web Component Jie Jue Shang Shu De Can Shu Yue Shu , Can Shu Yan Zheng ,Huan Duo Liao Can Shu Zhi Fan Wei , Can Shu Mo Ren Zhi . Bing Qie React Component Gen React Page You Yi Yang De Sheng Ming Zhou Qi .

1.1.1 Can Shu Mo Ren Zhi :
static defaultProps = {
titleNormalStyle: null,
checked: false,
titleLines: 0,
};

Shu Xing Can Shu Mo Ren Zhi Du Xie Zai static defaultProps Li ,Yin Wei Shi Jing Tai Cheng Yuan ,Suo Yi Cheng Xu Chu Shi Hua Shi Jiu Sheng Ming Hao Liao . Dang Zu Jian Shi Yong Zhe Mei You Gei Shu Xing She Zhi Zhi Shi ,Jiu Hui Zi Dong Shi Yong Mo Ren Zhi .

1.1.2 Can Shu Lei Xing :
static propTypes = {
onPress: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,
bgCheckStyle: PropTypes.object,
checked: PropTypes.bool,
titleLines: PropTypes.number,
};

PropTypes Hou Mian De func, string Deng Jiu Shi Can Shu Yue Shu ,isRequired Shi Can Shu Yan Zheng ,Biao Shi Bi Tian .

Chang Jian Ji Ben Yue Shu Lei Xing You :PropTypes.array,PropTypes.bool,PropTypes.func,PropTypes.num ber,PropTypes.object,PropTypes.string,PropTypes.symbol(ES6 Xin Lei Xing ),Qi Zhong De PropTypes.func Shi Zhi function.

React Yue Shu Lei Xing You :PropTypes.node,PropTypes.element,PropTypes.oneOf,PropTypes. oneOfType,PropTypes.arrayOf,PropTypes.shape,PropTypes.any Deng .

  • node Suo You Ke Yi Bei Xuan Ran De Dui Xiang :Shu Zi ,Zi Fu Chuan ,DOM Yuan Su Huo Bao Han Zhe Xie Lei Xing De Shu Zu
  • element Can Shu Lei Xing Wei React Yuan Su
  • oneOf Zai Gui Ding De Can Shu Zhi Xuan Xiang Zhong Duo Xuan Yi ,Bi Ru :PropTypes.oneOf(["house", "job", "car"]);
  • oneOfType Zai Gui Ding De Can Shu Lei Xing Xuan Xiang Zhong Duo Xuan Yi ,Bi Ru :PropTypes.oneOfType(["number", "string"]);
  • arrayOf Zhi Yun Xu Shi Yong Mou Chong Lei Xing De Shu Zu ,Bi Ru :PropTypes.arrayOf(PropTypes.number);
  • shape Cai Yong Zhi Ding Yang Shi De Can Shu Dui Xiang PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number});
  • any Bu Ke Kong De Ren Yi Lei Xing PropTypes.any;

Geng Duo Zi Liao :https://github.com/facebook/prop-types

1.1.3 Zu Jian Sheng Ming Zhou Qi
  • Chuang Jian Qi :constructor,componentWillMount, render, componentDidMount
  • Cun Zai Qi :componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate
  • Xiao Hui Qi :componentWillUnmount

1.2 Virtual DOM

Bu Shi Jin Tian Tao Lun De Zhong Dian ,Yi Hou Zai Jiang .

2. Zu Jian Kai Fa Ru Men

Shi Li 1:

Zu Jian Dai Ma :

class Greeting extends Component {
render() {
return <Text>Hello, {this.props.name}!Text>;
}
}

Diao Yong Dai Ma :

import Greeting from "./Greeting";

class LotsOfGreetings extends Component {
render() {
return (
<View>
<Greeting name="Growth FE" />
<Greeting name="Growth Android" />
<Greeting name="Growth iOS" />
View>
);
}
}
Shi Li 2:

Zu Jian Dai Ma :

class MyComponent extends Component {
static propTypes = {
children: PropTypes.element.isRequired
};
render() {
return <View>{this.props.children}View>;
}
}

Diao Yong Dai Ma :

Yi Ge Shen Qi De Wang Zhan Ren Ren Xin Lai De Sheng Huo Fu Wu Ping Tai ); } }">import MyComponent from './MyComponent';

class ShowElement extends Component {
render() {
return (
<MyComponent>
<View>
<Text>Yi Ge Shen Qi De Wang Zhan <Text>
<Text>Ren Ren Xin Lai De Sheng Huo Fu Wu Ping Tai <Text>
View>
MyComponent>
);
}
}

Xie Yi Ge Zi Ding Yi Zu Jian Jiu Shi Zhe Yao Jian Dan ,You Mei You ? Dan Shuo Hao De Can Shu Yue Shu ,Yan Zheng Ni ? Qing Kan Xia Mian Gao Ji Yong Fa :

3. Zu Jian Kai Fa Ti Gao

Xiao Guo Tu :

Zu Jian Dai Ma :

import React, { PropTypes, PureComponent } from "react";
import { Text, View, TouchableOpacity } from "react-native";

const styles = {
// Yang Shi Dai Ma Lue
};

export default class CheckBoxButton extends PureComponent {
static propTypes = {
onPress: PropTypes.func.isRequired,
title: PropTypes.string.isRequired,

titleNormalStyle: PropTypes.object,
titleCheckStyle: PropTypes.object,
bgNormalStyle: PropTypes.object,
bgCheckStyle: PropTypes.object,

checked: PropTypes.bool,
titleLines: PropTypes.number
};

static defaultProps = {
titleNormalStyle: null,
titleCheckStyle: null,
bgNormalStyle: null,
bgCheckStyle: null,

checked: false,
titleLines: 0
};

render() {
let bgStyle = this.props.bgNormalStyle || [
styles.bg.base,
styles.bg.normal
];
let titleStyle = this.props.titleNormalStyle || styles.text.normal;
let triangleStyle = null;

if (this.props.checked) {
bgStyle = this.props.bgCheckStyle || [styles.bg.base, styles.bg.checked];
titleStyle = this.props.titleCheckStyle || styles.text.checked;
triangleStyle = [
styles.triangle.base,
styles.triangle.corner,
styles.triangle.position,
{
borderTopColor:
titleStyle.color || styles.triangle.bgColor.borderTopColor
}
];
}

return (
<View>
<TouchableOpacity
activeOpacity={1}
style={bgStyle}
onPress={this.props.onPress || null}
>
<Text numberOfLines={this.props.titleLines || 1} style={titleStyle}>
{this.props.title}
Text>
TouchableOpacity>
{this.props.checked ? (
<View style={triangleStyle}>
<View style={[styles.correct.base, styles.correct.position]} />
View>
) : null}
View>
);
}
}

Diao Yong Dai Ma :

import React, { Component } from "react";
import { Text, View } from "react-native";

import CheckBoxButton from "./checkBoxButton";

const styles = {
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#FFF"
},
welcome: {
fontSize: 16,
textAlign: "center",
margin: 10
}
};

export default class CheckBoxButtonDemo extends Component {
static navigationOptions = {
title: "Fu Xuan Kuang An Niu "
};

constructor(props) {
super(props);
this.state = {
checkBoxButton1: false,
checkBoxButton2: true
};
}

checkBoxButton1Handler = () => {
this.setState({ checkBoxButton1: !this.state.checkBoxButton1 });
};

checkBoxButton2Handler = () => {
/* eslint react/no-string-refs:0 */
if (this.refs.a2 && !this.refs.a2.props.checked) {
console.debug(this.refs.a2.props.value);
}
this.setState({ checkBoxButton2: !this.state.checkBoxButton2 });
};

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native CheckBoxButton!
Text>
<CheckBoxButton
titleLines={1}
title={"Xiao Shou Dai Biao "}
value={"xsdb"}
titleNormalStyle={{ fontSize: 20, color: "gray" }}
titleCheckStyle={{ fontSize: 20, color: "blue" }}
bgNormalStyle={{
width: 143,
height: 53,
borderRadius: 1.5,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#F7F7F7"
}}
bgCheckStyle={{
width: 143,
height: 53,
borderRadius: 1.5,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#D1EAFF"
}}
checked={this.state.checkBoxButton1}
onPress={this.checkBoxButton1Handler}
/>
<Text>1Text>
<CheckBoxButton
ref="a2"
title={"Xiao Shou Jing Li Zhu Guan Yu Zong Jian "}
value={"xsjlzgyzj"}
checked={this.state.checkBoxButton2}
onPress={this.checkBoxButton2Handler}
/>
View>
);
}
}

Dai Ma Fen Xi :

  • Text, View, TouchableOpacity Shi react native Kong Jian ,Xiang Dang Yu HTML Ye Mian Li De span, div, Zhi Chi oncick Shi Jian De Kong Jian
  • Zai React Native Li ,Mei You Lei Si .css De Wen Jian ,Yang Shi Wen Jian Du Shi Yi JS Wen Jian Xing Shi Shu Xie He Yin Yong
  • PureComponent Shi Zi Dai You Hua Gong Neng De Component,Hou Mian Hui Xiang Tan
  • Zai static defaultProps = { } Li Bian Xie Shu Xing Can Shu De Mo Ren Zhi
  • Zai static propTypes = { } Li Bian Xie Shu Xing Can Shu De Yue Shu

4. Zu Jian Kai Fa You Hua

Component vs PureComponent

You Hua Qian :

You Hua Hou :

Component He PureComponent De Qu Bie Jiu Shi :PureComponent Yi Jing Ding Yi Hao Liao shouldUpdateComponent Er Component Xu Yao Xian Shi Ding Yi .

Wo Men Cong Jian Duan De Yuan Ma Yi Kan Jiu Jing :

// Ding Yi CompositeTypes
var CompositeTypes = {
ImpureClass: 0, // Ji Cheng Zi Component De Zu Jian
PureClass: 1, // Ji Cheng Zi PureComponent De Zu Jian
StatelessFunctional: 2 // Han Shu Zu Jian
};

// Zhe Ge Bian Liang Yong Lai Kong Zhi Zu Jian Shi Fou Xu Yao Geng Xin
var shouldUpdate = true;

// inst Shi Zu Jian Shi Li
if (inst.shouldComponentUpdate) {
shouldUpdate = inst.shouldComponentUpdate(nextProps, nextState, nextContext);
} else {
if (this._compositeType === CompositeType.PureClass) {
// Yong shallowEqual Dui Bi props He state De Gai Dong
// Ru Guo Du Mei Gai Bian Jiu Bu Yong Geng Xin
shouldUpdate =
!shallowEqual(prevProps, nextProps) ||
!shallowEqual(inst.state, nextState);
}
}

Jian Er Yan Zhi ,ReactCompositeComponent Hui Zai mount De Shi Hou Pan Duan Ge Ge Zu Jian De Lei Xing ,She Ding _compositeType,Ran Hou Gen Ju Zhe Ge Lei Xing Lai Pan Duan Shi Fei Xu Yao Geng Xin Zu Jian . Shi Ji Gen PureComponent You Guan De Jiu Shi shallowEqual De Na Liang Xing ,Wu Fei Shi Zai Pan Duan props He state De Shi Fou Bian Hua ,Zui Zhong Jue Ding Yao Bu Yao Zhong Xin Zhi Xing render.

Ru Guo Wo Men Bu Ji Cheng PureComponent,You Xiang Yao You Hua ,Jiu De Zi Ji Lai Chu Li shouldComponentUpdate Shi Jian ,Jiu Lao Lao Shi Shi De Xie Ru Xia Pan Duan (Zhu :Xia Mian Wei Wei Ma )

shouldComponentUpdate(nextProps, nextState) {
if((nextProps.a !== this.props.a) || (nextState.a !== this.state.a) || (nextProps.b !== this.props.b) || (nextState.b !== this.state.b) ......) {
return true;
}
return false;
}

5. Zui Hou

Zui Hou Bu Chong Ji Dian Kai Fa React Zi Ding Yi Zu Jian Zhou Bian De Yi Xie Zhi Shi Dian ,Bi Ru ESLint, shouldComponentUpdate De Zhu Yi Shi Xiang .

  • ESLint Ru Guo Shi Yong Liao ESLint + Airbnb,Hui Qiang Zhi Yao Qiu Zu Jian Li De Mei Yi Ge Shu Xing Du Bi Xu You Mo Ren Zhi (defaultProps Li ).
  • shouldComponentUpdate Shi Yong PureComponent Shi ,Bi Mian Shi Yong Ke Bian Dui Xiang Zuo Wei props He state,Qu Er Dai Zhi De Shi Mei Ci Fan Hui Yi Ge Quan Xin De Dui Xiang ,Bi Ru Shu Zu Can Shu Jiu Tong Guo concat Lai Fan Hui Xin De Shu Zu .

Can Kao Wen Dang :