React零碎知识点回顾

Posted 2020-09-19 不由分说

1、JSX更接近于js而不是html，所以React DOM使用驼峰属性命名规则来取代原来的HTML属性名。

2、JSX的本质是个函数对象。下面两个例子是相似的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  ‘h1‘,
  {className: ‘greeting‘},
  ‘Hello, world!‘
);

3、将一个React元素渲染到根节点里，通过ReactDOM.render()。

4、局部更新：React DOM会将元素和子元素与之前的状态比较，然后只更新必要的部分使DOM变为所希望的状态。

5、React组件的首写字母必须大写。举个例子，<div/>代表一个DOM标签，但是<Welcome />代表一个一个组件。

6、正确使用state：避免使用this.state.name=value的方式来更新state，这样并不会重新渲染DOM。采用this.setState方式。

7、调用this.setState后state的值可能不会立即改变。更安全的做法是使用函数做为setState的参数。

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

8、组件的render方法返回null不会影响组件的生命周期方法的运行。比如，componentWillUpdate和componentDidUpdate将一直被调用。

9、关列列表：key帮助React鉴别哪一项发生了改变，添加了，或者移除了。key应该添加在数组里的元素身上作为一个稳定的特性。

10、HTML表单(form)和 React托管的表单略有不同。两种获取值的方式也不同：

//通过state管理value
<textarea value={this.state.value} onChange={this.handleChange} />

//通过refs管理value
<CustomTextInput ref={(input) => { this.textInput = input; }} />

11、PropTypes已经被新版本React移除了，请独立安装并使用‘prop-types‘库。

12、正确使用ref属性。字符串refs已经不推荐使用，请使用行间函数的方式指定ref。

13、在React渲染的生命周期中，表单元素中的value属性会重写DOM中的元素。而使用非控制组件，你经常想要让React指定初始value值，但是让之后的值来更新非控制组件。

　　为了解决这个问题，你可以指定defaultValue属性替代value值：

//控制组件：用React的state来控制表单元素的value值;
//非控制组件:表单数据就被DOM本身所处理

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

14、不使用ES6：

//使用es的写法：

class Greeting extends React.Component {

　　constructor(props) {　　　　//设置初始化state
    　　super(props);
    　　this.state = {count: props.initialCount};
  　　}

　　Greeting.propTypes = {　　　　//设置初始化prop类型
  　　name: React.PropTypes.string
　　};

　　Greeting.defaultProps = {　　　　//设置默认props值
  　　name: ‘Mary‘
　　};

　　render() { 　　　　//事件需要手动绑定this
　　　　return <h1 onClick={this.handleClick.bind(this)} >Hello, {this.props.name}</h1>;
　　} 
}

//不使用es6的写法：

var Greeting = React.createClass({

　　propTypes: {　　　　//设置初始化prop类型
    　　name: React.PropTypes.string
  　},

　　getInitialState: function() {　　　　//设置默认state
    　　return {
　　　　　　count: this.props.initialCount
　　　　 };
  　},

　  getDefaultProps: function() {　　　　//设置默认props
 　　　　return { 　　
　　　　　　name: ‘Mary‘ 　　
　　　　　}; 　
　　},

　　render: function() { 　　　　//自动绑定当前this
　　　　return <h1 onClick={this.handleClick} >Hello, {this.props.name}</h1> 
　　} 
});

15、react并不推荐使用context，如果你没有用的context，那么恭喜你。