以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性的字典,方便大家查阅;
- . JSX语法
- . 注释
- . React元素
- . 组件
- . 标签属性
- . 元素的子代
- . 状态state
- . Props和State
- . 事件处理
- . key
- . 表单
- . props的类型检查
- . props的默认值
- . 元素的引用
- . 不使用ES6
- . React的特性
- . 性能优化
等效于:
- const element = (
- <h1 className="greeting">
- Hello, world!
- </>
- );
React.createElement() 这个方法首先会进行一些避免bug的检查,之后会返回一个类似下面例子的对象:
- const element = React.createElement(
- 'h1',
- {className: 'greeting'},
- 'Hello, world!'
- );
这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
- // 注意: 以下示例是简化过的(不代表在 React 源码中是这样)
- const element = {
- type: 'h1',
- props: {
- className: 'greeting',
- children: 'Hello, world'
- }
- };
,通过大括号来定义以 JavaScript 表达式为值的标签属性:
- const element = <div tabIndex="0"></div>;
;切注意:如果使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式;
- const element = <img src={user.avatarUrl}></img>;
由于JSX的本质是JavaScript,所以在JSX中的注释还是JavaScript的注释;为了JSX的XML中使用注释,所以需要用先用花括号
产生JavaScript环境,然后在
- {}
内使用JavaScript注释; 所以,关于的注释的规则总结如下:
- {}
括住;
- {}
;
- {}
;
- const element = <h1>Hello, world</h1>;
或
- <div>
,在编译时,会将字符串 'div' 或 'span' 传 递给 React.createElement 方法;大写开头的 JSX 标签名表示一个 React 组件,如
- <span>
,在编译时,会被编译为同名变量并被引用,如
- <Foo />
,所以如果使用了 大家开头的标签,如:
- React.createElement(Foo)
,则必须在作用域中先声明与该标签名同名的变量,如 Foo 变量;
- <Foo />
;但不能是表达式,如:
- <MyComponents.DatePicker color="blue" />
是错误的;
- <MyComponents["DatePicker"] color="blue" />
该函数是一个有效的React组件,它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件,是因为从字面上来看,它就是一个JavaScript函数。
- function Welcome(props) {
- return <h1>Hello, {props.name}</h1>;
- }
- class Welcome extends React.Component {
- render() {
- return <h1>Hello, {this.props.name}</h1>;
- }
- }
在 JSX 中有如下几种不同的方式来指定标签属性:
,表达式的值最终会被赋给相应的标签属性。if 语句和 for 循环在 JavaScript 中不是表达式,因此它们不能直接用在标签属性中;
- <MyComponent foo={1 + 2 + 3 + 4} />
- <MyComponent message="<3" />
- <MyComponent message="<3" />
- <MyComponent message={ '<3'} />
- <MyTextBox autocomplete />
- <MyTextBox autocomplete={true} />
- function App1() {
- return <Greeting firstName="Ben" lastName="Hector" />;
- }
- function App2() {
- const props = {firstName: 'Ben', lastName: 'Hector'};
- return <Greeting {...props} />;
- }
在 JSX 中,开始标签和结束标签之间的子代内容会作为props.children传递;开始标签和结束标签之间可以是任何类型的东西,只要该组件在 React 渲染前能将其转换成 React 能够理解的东西即可;
例如,可以传递如下类型的子代:
- <div />
- <div></div>
- <div>{false}</div>
- <div>{null}</div>
- <div>{undefined}</div>
- <div>{true}</div>
;应当使用 setState()设置状态,如:
- this.state.comment = 'Hello';
;
- this.setState({comment: 'Hello'});
应该给 setState() 传一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,如:
- //错误的示范
- this.setState({
- counter: this.state.counter + this.props.increment,
- });
上方代码使用了箭头函数,但它也适用于常规函数;
- //正确的示范
- this.setState((prevState, props) = >({
- counter: prevState.counter + props.increment
- }));
示例:
- function ActionLink() {
- function handleClick(e) {
- e.preventDefault();
- console.log('已被点击!');
- }
- return ( < a href = "#"onClick = {
- handleClick
- } > 点击我 < /a>
- );
- }/
要给组件的props限制类型,则需要设置组件类的propTypes属性;
示例代码:
- import PropTypes from 'prop-types';
- class Greeting extends React.Component {
- render() {
- return ( < h1 > Hello, {
- this.props.name
- } < /h1>
- );
- }
- }
- Greeting.propTypes = {
- name: PropTypes.string,
- children: PropTypes.element.isRequired
- };/
可以通过设置propTypes的children属性
来限传入的子代内容;
- propTypes.children
要给组件的props设置默认值,则需要设置组件类的defaultProps属性;
defaultProps 用来确保 this.props.name 在父组件没有特别指定的情况下,有一个初始值。类型检查发生在 defaultProps 赋值之后,所以类型检查也会应用在 defaultProps 上面;
示例代码:
- class Greeting extends React.Component {
- render() {
- return (
- <h1>Hello, {this.props.name}</h1>
- );
- }
- }
- // 为属性指定默认值:
- Greeting.defaultProps = {
- name: 'Stranger'
- };
- // 渲染 "Hello, Stranger":
- ReactDOM.render(
- <Greeting />,
- document.getElementById('example')
- );
元素的标签属性 ref 接受一个回调函数,它在元素被加载或卸载时执行;该回调函数接收一个参数element,
在元素被加载时:
如果该元素是原生的HTML元素,则参数element是该元素的DOM节点实例;
如果该元素是React组件,则参数element是该元素的Reac实例;
在元素被卸载时:参数element是null;
注意:
以上是用ES6的语法创建的React组件的,当然也可以仅用ES5及以下的语法特性来创建,如下:
用
模块创建组件类,代替ES6的用class创建组件类:
- create-react-class
- var createReactClass = require('create-react-class');
- var Greeting = createReactClass({
- render: function() {
- return <h1>Hello, {this.props.name}</h1>;
- }
- });
ES6 中 class 相关的接口与 createReactClass 方法十分相似,但有以下几个区别:
表达式中不能使用
- {}
语句,可以使用条件表达式(三元运算
- if else
)代替;
- 条件?值1: 值2
类型的组件在做变化检查时是用浅比较来判断是否有变化的,所以性能较快,所以:对于没有必须进行深比较的组件,优先使用
- React.PureComponent
而不是
- React.PureComponent
;
- React.Componen
来源: https://juejin.im/entry/59d8adc6f265da066a106be3