React官网学习笔记

Posted 2020-07-23 BestMe丶

欢迎指导与讨论 : ）

　　前言

　　　　本文主要是笔者在React英文官网学习时整理的笔记。由于笔者水平有限，如有错误恳请指出 O(∩_∩)O

　　一 、Tutoial 篇

　　　　1 . React的组件类名的首字母必须是大写  var Comment = React.creatClass({..})  class Comment extends Component(){...} 

　　　　2 . 我们需要往一个对象里传入一些方法，并把这个对象以参数的形式传到React.creatClass( )里。其中最重要的方法是render( )，它会返回一棵组件树，并在最后把组件render(渲染)到html里

　　　　3 . 组件内部tags(HTML标签)并不是正真的DOM节点，它们都只是React组件的实例。你可以把这些tags当做是标识，或者是数据的片段，而React会知道怎么处理它们。React也不会生成HTML字符串，因此默认对xss攻击是有保护作用

　　　　4 . 数据通过property(属性)从父级组件传到子组件。在子组件，这些数据成为了this.props，而其它一些嵌套的元素变成了this.props.children

　　　　5 . 当页面出现未经转换的HTML标签，比如 "This is <b>Blog</b>" ，这多半是React未了防止xss攻击而做的。当我们想把字符串里面的标签转换为正真的HTML，我们需要dangerouslySetInnerHTML

 rawMarkup: function() {
    var rawMarkup = ...
    return { __html: rawMarkup };
  }
<span dangerouslySetInnerHTML={this.rawMarkup()} />

　　　　6 . props一般是immutable( 不可变 )，我们需要引入state( mutable可变 )。每当state改变时，组件就会re-render( 重新渲染 )它自己。this.state在组件内部是私有的属性，我们可以通过this.setState( )方法来设置、改变state。也能通过getInitialState( )方法来设置初始化的state

　　　　7 . componentDidMount( )方法会在组件渲染在HTML的时候自动执行。因此我们可以在这个生命周期函数里fetch/Ajax异步获取我们需要的数据，然后this.setState，把数据渲染到界面上

　　　　8 . Callbacks as props。父组件把某些函数当做property传给子组件。当子组件触发这个函数时，父组件就能获取变化，并做进一步处理。

 

　　二、Displaying Data / JSX

　　　　1 . React 内部使用迅速、性能强大的虚拟DOM和diffs算法，用来计算‘谁‘是需要被更新的。React 不会随意操作DOM，除非这个操作是必须的。

　　　　2 . 限制：React组件函数最多只允许渲染一个根节点，如果你的组件包含多个节点，请把它们包含在一个大的根节点里面。　　

　　　　3 .  JSX语法是可选的，我们也选择使用原生JS去写我们的组件，但是JSX语法更加高效、易懂。JSX可以同时渲染HTML标签(小写)和我们开发的组件(首字母大写)

　　　　4 . 注意：DOM里面的属性class（类名）和for（），在JSX里面的写法是className和htmlFor

　　　　5 . 布尔值属性 <input type="button" disabled={false} /> 。三元表达式  var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container> 

　　　　6 . 同名属性会被后面的属性重写

var props = { foo: ‘default‘ };
var component = <Component {...props} foo={‘override‘} />;

　　　　7. 如果我们想为原始的HTML标签增加自定义属性，我们必须为该属性加上前缀 data- 否则React不会为我们渲染这个自定义属性

　　　　

　　三、UI / Component / Props

　　　　1 . 函数自动绑定。在es5里，组件内部的方法都会自动绑定到组件实例上。当我们使用es6时，才有必要绑定this 

// es6
<div onClick={this.tick.bind(this)}>
// 箭头函数
<div onClick={() => this.tick()}>
// 预绑定
constructor(props) {
    //...
    this.tick = this.tick.bind(this);
}
<div onClick={this.tick}>

　　　　2. 事件代理。React 不会真正地为元素节点创建箭头事件和对应处理函数。当React启动的时候，它会把所有的事件箭头放到单独的一个根节点上面。当有元素插入或者被移除，对应的事件处理函数也会被添加或移除。

　　　　3.   组件就是一个状态机。当我们使用setState的时候，React会根据新的state，非常高效(diff算法)地重新渲染组件

 　　　 4. 如何构建一个可复用的组件。( 1 ) Prop validation(类型验证) ( 2 ) Default Props Values(设置默认props值) ( 3 )  由props驱动内部state 

 　　　5 . es6语法。( 1 ) 没有自动绑定this ( 2 ) 没有Mixin

　

　　四、表单

　　　　1 . 表单组件的某些属性(props)能够通过交互发生改变。value属性( <input><textarea> )、checked( checkbox、radio )、selected( <option> )。同时，当这些表单组件的state或者value改变的时候，也会触发挂载到该组件上的onChange( )事件

　　　　2 . 受限(被控制 controlled component)当表单组件设置了value时(比如<input type=‘text‘ value=‘hello‘ >)，就变成了controlled components，你会发现你的输入对表单并没有效果。这是因为React将该组件的value值声明为‘hello‘了。通常的处理是，获取input的React元素(refs、event)，并在它上面挂载onChange方法

 getInitialState: function() {
    return {value: ‘Hello!‘};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    return (
      <input
        type="text"
        value={this.state.value}
        onChange={this.handleChange}
      />
    );
  }

　　　　3 .  Uncontrolled component 不受限的表单控件。<input type=‘text‘/> 向该表单组件进行输入，会立刻从view层得到反应：我们的输入有效了，而不是像上面的例子一样，怎么输入都没有效果。如果要对输入值进行监听，可以设置onChange方法并挂载到该组件上面。同时，我们可以设定默认输入值defaultValue、defaultChecked <input type=‘text‘ defaultValue=‘hello‘ />

　　　　4 . select表单组件

// 单选
<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
 </select>
// 多选
<select multiple={true} value={[‘B‘, ‘C‘]}>.

 

　　五、浏览器环境 / Refs

　　　　1 . Virtual dom( 虚拟dom )。React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述符。组件内部的render( )方法也会返回一个DOM的描述符。react通过对比内存中的描述符和组件的描述符，会选择最快的方式更新浏览器的Dom视图。另外，我们在React内部使用的‘事件系统‘，其实全都是React内部的‘虚拟事件‘，React会确保这些事件和事件对象都符合w3c规范,并以一种高性能的方式跨浏览器。

　　　　2 . 组件通常有三种类型的生命周期

　　　　　　( 1 ) Mounting(这是一个组件初始化的生命周期)  

　　　　　　　　1 . getInitialState( ) 一个stateful的组件应该在这个时候声明并返回一个state对象

　　　　　　　　2 . componentWillMount( ) 准备插入到Dom

　　　　　　　　3 . componentDidMount( ) 已经插入到Dom

　　　　　　( 2 ) Updating(这是一个组件re-render重绘它自己的时候所要经历的生命周期)

　　　　　　　　1. componentWillReceiviProps( nextProps ) 第一个参数是将接受到一个props的新值

　　　　　　　　2 . shouldComponentUpdate(nextProps, nextState) 参数分别是props和state的新值

　　　　　　　　3 . componentWillUpdate(nextProps, nextState)同上。在这个生命周期里，我们不能再调用setState

　　　　　　　　4 . compoentDidUpdate( preProps, preState  )参数分别是props和state的上一个值

　　　　　　( 3 ) Unmounting

　　　　　　　　1. componentWillUnmount( ) 当组件被移除前一刻会被执行

　　　　3 .  　React.render( )方法会返回一个virtual Dom元素，即组件的"引用" var helloInstannce = ReactDom.render(...) ，当这个组件是stateless的话，会返回null。注意：当我们使用JSX的时候，返回的只是一个ReactElement  var hell = <Hello /> 

　　　　4 . 通过refs获取组件的实例 

<input ref="myInput" />
var input = this.refs.myInput;
var inputValue = input.value;

　　

　　六、Tips　　

　　　　1 . 行内样式。React会为某些具备单位的css属性默认添加 ‘px‘ 单位  var divStyle = {height: 10}; // rendered as "height:10px" 

 var divStyle = {
  color: ‘white‘,
  msTransition: ‘all‘ 
};

ReactDOM.render(<div style={divStyle}>Hello</div>, Node);

　　　　2 . If-else 在JSX中的使用方法

　　　　 if-else 在JSX里面是没有效果的，因为JSX仅仅是一些调用函数和构造函数对象的语法糖。对于这个问题，React推荐有两种方法。( 1 ) 调用逻辑和render函数里面的return进行分离 ( 2 ) 在render函数内使用立即执行函数(显然第一种比较好)

// --- 1 ---
var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>{loginButton}</nav>
);
// --- 2 ---
return (
  <section>
    <p>
      {(() => {
        switch (this.state.color) {
          case "blue":  return "#0000FF";
          default:      return "#FFFFFF";
        }
      })()}
    </p>
  </section>
);

　　　　3 . 当我们使用  this.props.children 的时候要当心。虽然它大多数情况下会返回一个component数组 ( Array.isArray(this.props.children) => true  但当只有一个component的时候它只会返回一个component，而不是一个Array 

　　　　4 . componentDidMount( ) 一个添加Dom监听和初始化拉取数据的好地方

// --- 1 --- 
 componentDidMount: function() {
    window.addEventListener(‘resize‘, this.handleResize);
  }
// --- 2 ---
componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }, 

　　七、插件

　　　　1 . Animation( 动画 ) —— ReactTransitionGroup，这个插件能够让组件在插入或者离开Dom的时候进行一段小动画。　

// 1 . 基本用法
 var ReactCSSTransitionGroup = require(‘react-addons-css-transition-group‘);
// in render function ...
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
 </ReactCSSTransitionGroup>
// in style.css
.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

　　　　　　( 2 ) 初始化动画  <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> 

　　　　　　( 3 ) 自定义动画  <ReactCSSTransitionGroup transitionName{{enter:‘enter‘,enterActive:‘enterActive‘,leave:‘leave‘,leaveActive:‘leaveActive‘,appear:‘appear‘,appearActive:‘appearActive‘} }> 

　　　　　　 ( 4 ) 禁止动画  transitionEnter={false} or transitionLeave={false} 

　　　　　　 ( 5 ) 渲染不同的组件  <ReactTransitionGroup component="ul"> 

　　　　2 . 双向绑定插件 —— react-addons-linked-state-mixin

var LinkedStateMixin = require(‘react-addons-linked-state-mixin‘);

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: ‘Hello!‘};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState(‘message‘)} />;
  }
});

　　　　3 . PureRenderMixin

// es6
import PureRenderMixin from ‘react-addons-pure-render-mixin‘;
class FooComponent extends React.Component {
  constructor(props) {
    super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}