2018-09-07 19:48:55 ZYC88888 阅读数 5765
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

es6中export和export default的区别

  • export与export default均可用于导出常量、函数、文件、模块
  • 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用

  • 在一个文件或模块中,export、import可以有多个,export default仅有一个

  • 通过export方式导出,在导入时要加{ },export default则不需要
  • 其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

React中使用export导出类可以有两种方法

1. export default classname

这种导出方式与export default class classname extends React.class相同

在其他文件中引用时采取如下方式

import classname form path

例如:

Com.js

class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}

function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}

export  default App;

index.js

import App  from './components/Com';

const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

2. export {classname1,classname2}

在其他文件中引用时采用如下方式

import {classname1,classname2} from path

import {classname1} //注意引用一个类时也要加上{}

例如:

class Welcome extends React.Component{
    render(){
        return <h1> hello,{this.props.name}</h1>
    }
}

function App(){
    return (
        <div>
            <Welcome name="Sara"/>
            <Welcome nmae="Peng"/>
        </div>
    );
}

export  {Welcome,App};

index.js

import {App}  from './components/Com';

const element=<App/>;
ReactDOM.render(element, document.getElementById('root'));

 

2019-07-24 11:57:21 susuzhe123 阅读数 95
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

页面中多个表单,多个输入框,统一封装处理,formCreate为一个高阶组件

import React from 'react';

export const formCreate = WrappedComponent => class extends React.Component {
    
    constructor(){
		super();
		this.state={fields:{}}
	}
 
	onChange = key => e =>{
		const { fields } = this.state;
		fields[key] = e.target.value;
		this.setState({
			fields,
		});
	}
 
	handleSubmit=()=>this.state.fields
 
	getField = fieldName =>{
		return {
			onChange:this.onChange(fieldName)
		}
	}
 
	render(){
		const props = {
			...this.props,
			getVal:this.handleSubmit,
			setval:this.getField,
		}
 
		return(<WrappedComponent {...props}/>)
	}

};

使用:

import { formCreate } from '../../components/formCreat';

@formCreate
export default class Login extends React.Component {
...//省略代码
<input type="text" {...this.props.setval('username')} placeholder="用户名" id="username"/>
<input type="password" placeholder="密码" {...this.props.setval('password')} />
<a className="loginBtn self_btn" onClick={this.handleSubmit}>立即登录</a>
handleSubmit=()=>{
		console.log(this.props.getVal())//这里就是需要的值{name:1111,password:2222}
	}
......//省略代码
2018-02-28 11:25:07 liyun123gx 阅读数 970
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

RCT_EXPORT_MODULE:声明模块

#define RCT_EXPORT_MODULE(js_name) \
RCT_EXTERN void RCTRegisterModule(Class); \
+ (NSString *)moduleName { return @#js_name; } \
+ (void)load { RCTRegisterModule(self); }
  1. + (NSString *)moduleName { return @#js_name; } 添加moduleName类方法。
  2. + (void)load { RCTRegisterModule(self); } 重写load方法。其中RCTRegisterModule 方法实现如下:
// RCTBridge.m 中
void RCTRegisterModule(Class moduleClass)
{
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    RCTModuleClasses = [NSMutableArray new];
  });

  RCTAssert([moduleClass conformsToProtocol:@protocol(RCTBridgeModule)],
            @"%@ does not conform to the RCTBridgeModule protocol",
            moduleClass);

  // Register module
  // 将moduleClass添加到RCTModuleClasses数组中
  [RCTModuleClasses addObject:moduleClass];
}

RCT_EXPORT_METHOD:声明方法

将方法加前缀 __rct_export__

#define RCT_EXPORT_METHOD(method) \
  RCT_REMAP_METHOD(, method) 


#define RCT_REMAP_METHOD(js_name, method) \
  RCT_EXTERN_REMAP_METHOD(js_name, method) \
  - (void)method

#define RCT_EXTERN_REMAP_METHOD(js_name, method) \
  + (NSArray<NSString *> *)RCT_CONCAT(__rct_export__, \
    RCT_CONCAT(js_name, RCT_CONCAT(__LINE__, __COUNTER__))) { \
    return @[@#js_name, @#method]; \
  }

RCT_EXPORT_VIEW_PROPERTY:声明属性

方法添加前缀 propConfig

#define RCT_EXPORT_VIEW_PROPERTY(name, type) \
+ (NSArray<NSString *> *)propConfig_##name { return @[@#type]; }
2018-12-26 09:51:52 qq1036548849 阅读数 231
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

react参考文档

2017-12-09 17:19:15 chaos_hf 阅读数 84
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57550 人正在学习 去看看 李宁

JSX属性

.操作符在JSX中的应用

如果一个模块export出去多个React组件,你可以使用.来获取各个组件。

import React from 'react';

const MyComponents = {
    DatePicker: function DatePicker(props) {
        return <div>Imagine a {props.color} datepicker here.</div>;
    }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

用户自定义的组件标签必须以大写字母开头

防止和HTML原有的标签重名。

不能使用[]

当对象的属性是变量的时候,我们通常使用[]来获取属性值,但是JSX中不支持这种表达式。要想获取到相应的组件,需要先用变量将组件获取到,然后再使用JSX表达式。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}


import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

JSX属性值

  • 可以使用javascript表达式:

你可以使用javascript表达式作为JSX的属性值。只要包在{}中即可:

<MyComponent foo={1 + 2 + 3 + 4} />

对于MyComponent,属性props.foo的值为10。因为这是1+2+3+4的执行结果。

但是if语句和for循环这种并不是javascript表达式。但是你可以在外面使用它们,达到想要的效果。

function NumberDescriber(props) {
  let description;
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}
  • 字符串

字符串有两种书写方式:

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

你可以直接设置属性,因为HTML的属性默认是字符串类型的,所以两种是等价的。

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />


  • boolean值的属性

属性值默认是true,所以有以下两种表达方式:
<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />


  • 解构赋值属性

如果属性全都包含在一个对象里面,这时候你想传入到JSX中,你可以使用...传入。以下两种写法等价:
function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

你也可以挑选对象里面的一些属性处理过后再传入部分到JSX中:

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

React中的Fragment

阅读数 22

React 使用技巧总结

阅读数 186

react-s-listview

阅读数 435

没有更多推荐了,返回首页