React知识地图--React

YutHelloWorld commented 7 years ago

React

JSX

const element = <h1>Hello, world!</h1>;

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

<h1>{title}</h1>

JSX 嵌套

如果 JSX 标签是闭合式的，那么你需要在结尾处用 />, 就好像 XML/HTML 一样：

const element = <img src={user.avatarUrl} />;

互相嵌套

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

className

class 是保留词，所以添加样式时，需用 className 代替 class 。

<h1 className="loading">Hello world</h1>

Mapping Arrays to JSX

<div>
  {text.map(item => (
    <p key={item.id}>{item.text}</p>
  ))}
</div>

React组件3种形式

分别是 React.createClass, class 和 Stateless Functional Component（无状态组件）。推荐尽量使用最后一种，保持简洁和无状态。这是函数，不是 Object，没有 this 作用域，是 pure function。

createClass

var MyComponent = React.createClass({
  componentWillMount: function(){

  },
  render: function() {
    return (
      <div>ES5</div>
    );
  },
});

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

createClass写法是React官方反对的，会在React v15.*短期保留，在v16.0版本会被移除。

stateless function

const MyComponent = () => (
  <div>
    ES6
  </div>
);

class

class MyComponent extends React.Component {
  render() {
    return (
      <div>ES6</div>
    );
  }
}

PropTypes

使用PropTypes检查props

ES6写法

import Proptypes from 'prop-types'
class Video extends React.Component {
  render() {
      return (
          <View />
      );
  }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: PropTypes.bool.isRequired,
    maxLoops: PropTypes.number.isRequired
};

ES 试验特性写法： static是类的静态属性，不会被实例继承

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: PropTypes.bool.isRequired,
    maxLoops: PropTypes.number.isRequired
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

State

initialState的设定应放在constructor中

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title
    };
  }
}

也可以按照ES 试验特性写法

export default class Header extends Component {
  state = {
    title: this.props.title
  };

  // followed by constructor...
}

destructuring & spread attributes

class AutoloadingPostsGrid extends React.Component {
  render() {
    const {
      className,
      ...others,  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

// with arrow function
const App = ({className, ...rest}) => (
  <div className={classnames(className)} {...rest}>
    <MyComponent />
  </div>
);

YutHelloWorld commented 7 years ago

官方文档、中文

YutHelloWorld commented 7 years ago

2017/8/8更新

这里贴一张React组件生命周期图

react-lifecycle

counstruct方法的作用：设置初始state或者绑定方法，在其他任何表达式前应调用super(props)

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
  this.logger.bind(this)
}

logger () {
  console.log('hello world')
}

super(props)：super方法提供this给其他表达式引用，提供props给其他表达式调用。

this.logger.bind(this)用来绑定this。可用箭头函数结合ES7的静态属性替代

logger = () => {
  console.log('hello')
}

commentDidMount方法内可以设置state,触发组件更新重渲。

YutHelloWorld commented 7 years ago

Our Best Practices for Writing React Components . React组件的最佳实践译文 #7

YutHelloWorld commented 7 years ago

React数据向上和向下传递 react-props

摘录自：10 React mini-patterns

YutHelloWorld commented 2 years ago

新版生命周期

react生命周期(新)

旧版生命周期

react生命周期(旧)

YutHelloWorld / Blog