Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub
Created May 11, 2017 10:28
Show Gist options
  • Save xgqfrms-GitHub/ef0260bce093baf5d4bfd31293832c7a to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/ef0260bce093baf5d4bfd31293832c7a to your computer and use it in GitHub Desktop.
光纤 === guāng xiān
@xgqfrms-GitHub
Copy link
Author

1.React中的Form与HTML中的FORM的不同点包括
A.value/checked 属性设置后,用户输入无效
B.textarea的值要设置在value属性
C.select的value属性可以是数组
D.input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
E.textarea的值要设置在value属性

2.关于React中的JSX,下面说法正确的是
A.类似XML的语法,用来描述组件树
B.必须是驼峰命名
C.属性名不能和JavaScript关键字冲突
D.JSX允许直接在模板插入JavaScript变量

3.关于受控组件和非受控组件,下面说法错误的是
A.一个受控的组件都有一个value属性,渲染一个受控的会展示出value属性的值
B.一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props
C.一个非受控的组件不会维护自己的状态
D.一个没有value属性的就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来

4.React中Element(元素)与Component(组件)的区别是
A.元素是对在屏幕上显示的DOM节点或其他组件简单的对象描述
B.元素是React中最小基本单位
C.组件是由元素构成的
D.元素数据结构是普通对象,而组件数据结构是类或纯函数

5.关于React,说法错误的是
A.React是一个用于构建用户界面的JavaScript库
B.React主要用于构建UI
C.React是一款MVC框架
D.React起源于Facebook的内部项目

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented May 11, 2017

  • A.value/checked 属性设置后,用户输入无效
  • B.textarea的值要设置在value属性
  • C.select的value属性可以是数组
  • D.input/textarea的onChange用户每次输入都会触发(即使不失去焦点)
  • E.textarea的值要设置在value属性

@xgqfrms-GitHub
Copy link
Author

  • A .类似XML的语法,用来描述组件树;
  • B .必须是驼峰命名;
  • C .属性名不能和JavaScript关键字冲突;
  • D .JSX允许直接在模板插入JavaScript变量;

@xgqfrms-GitHub
Copy link
Author

xgqfrms-GitHub commented May 11, 2017

  • A .一个受控的组件都有一个value属性,渲染一个受控的会展示出value属性的值;
  • B .一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props;
  • C .一个非受控的组件不会维护自己的状态;
  • D .一个没有value属性的就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来;

@xgqfrms-GitHub
Copy link
Author

  • A .元素是对在屏幕上显示的DOM节点或其他组件简单的对象描述;
  • B .元素是React中最小基本单位;
  • C .组件是由元素构成的;
  • D .元素数据结构是普通对象,而组件数据结构是类或纯函数;

@xgqfrms-GitHub
Copy link
Author

  • A .React是一个用于构建用户界面的JavaScript库;
  • B .React主要用于构建UI;
  • C .React是一款MVC框架;
  • D .React起源于Facebook的内部项目;

@xgqfrms-GitHub
Copy link
Author

@xgqfrms-GitHub
Copy link
Author

react-intl.js

https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.js

https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.html

import 'normalize.css';

import qs from 'qs';
import { addLocaleData, IntlProvider, FormattedMessage } from 'react-intl';
import React from 'react';
import ReactDOM from 'react-dom';
import scriptjs from 'scriptjs';

const locale = qs.parse(location.search && location.search.slice(1)).locale || 'en-US';
const localePrefix = locale.slice(0, locale.indexOf('-'));

const scripts = [];

if (!window.Intl) {
  // should output by server by <script>
  scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/Intl.js`);
  scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/en-US.js`);
  // the following should be output by server template conditionally by <script>
  if (locale !== 'en-US') {
    scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/${locale}.js`);
  }
  // end
}
// should output by server by <script>
scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/en.js`);
// the following should be output by server template conditionally by <script>
if (localePrefix !== 'en') {
  scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/${localePrefix}.js`);
}
// end

const ready = () => {
  addLocaleData(window.ReactIntlLocaleData[localePrefix]);

  window.app = {
    // output by server conditional
    'zh-Hans-CN': {
      'app.zh': '选择中文',
      'app.en': '选择英文',
    },
    'en-US': {
      'app.zh': 'choose chinese',
      'app.en': 'choose english',
    },
  };

  const defaultApp = window.app['en-US'];

  const Test = React.createClass({
    render() {
      return (<div>
        <p>
          npm install react-intl@2.0.0
        </p>
        <p>
          <a href="?locale=en-US"><FormattedMessage
            id="app.en"
            defaultMessage={defaultApp['app.en']}
          /></a>
        </p>
        <p>
          <a href="?locale=zh-Hans-CN"><FormattedMessage
            id="app.zh"
            defaultMessage={defaultApp['app.zh']}
          /></a>
        </p>
      </div>);
    },
  });

  ReactDOM.render(
    <IntlProvider
      locale={locale}
      messages={window.app[locale] || defaultApp}
    >
      <Test />
    </IntlProvider>,
    document.getElementById('__react-content'));
};

if (scripts.length) {
  scriptjs(scripts, ready);
} else {
  ready();
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment