React笔记整理

大概大半年时间都在用react写项目，一直在笔记上零零星星地记录着，在新的一年即将到来之际，打算整理整理发出来。

1、React是什么？

React是Facebook开源的用于构建用户界面的javascript库。（好些人都觉着React很神秘，接触新事物时，必定要把它看得简单，这样你才有信心打败它啊，其实入门真的不难）

2、React的特色即它与其余js库相比好在哪里？

一、专一MVC架构中的V（view），使React很容易和开发者已有的开发栈进行融合

二、组件化，React顺应了web开发组件化趋势，从UI抽象出不一样的组件，方便屡次使用

三、提升造做性能，React抛弃html而应用JSX语法，由于DOM操做很是慢，因此引入虚拟DOM的概念

3、React精髓

在虚拟DOM上建立元素，而后将它们渲染到真实DOM上。

4、JSX

注意点：HTML 里的  class 在 JSX 里要写成  className，由于  class 在 JS 里是保留关键字。同理某些属性好比 for 要写成  htmlFor。

5、组件

一、组件的初始化

gitInitialState

初始化this.state的值，只在组件装载以前调用一次

可是在ES6中，能够在构造函数中初始化状态

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: props.initialCount };
  }
  render() {
    // ...
  }
}

gitDefaultProps

只在组件建立时调用一次并缓存返回的对象

使用 ES6 语法，能够直接定义 defaultProps 这个类属性来替代，这样能更直观的知道 default props 是预先定义好的对象值：

Counter.defaultProps = { initialCount: 0 };

render

render是必须的，是组装成这个组件的HTML结构

二、生命周期函数     

装载组件触发：

（1）componentWillMount

只会在装载以前调用一次，在  render 以前调用，你能够在这个方法里面调用  setState 改变状态，而且不会致使额外调用一次  render

 

（2）componentDidMount

只会在装载完成以后调用一次，在  render 以后调用，从这里开始能够经过  ReactDOM.findDOMNode(this)获取到组件的 DOM 节点。

 

更新组件触发：

这些方法不会在首次 render 组件的周期调用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸载组件触发：

componentWillUnmount

三、DOM操做

大部分状况下不须要查询DOM去更新新组件的UI，只须要经过设置组件的状态（setState），可是如何直接操做DOM呢？

（1）findDOMNode()

当组件加载到页面后能够经过findDOMNode（）方法拿到组件对应的DOM元素。

（2）ref

在须要引用的DOM元素上设置一个ref属性指定一个名称，而后经过this.refs.name来访问来访问对应的DOM元素

不要再render或者render以前访问refs，不要滥用refs

四、组件详细说明

static

statics 对象容许你定义静态的方法，这些静态的方法能够在组件类上调用；在这个块儿里面定义的方法都是静态的，意味着你能够在任何组件实例建立以前调用它们，这些方法不能获取组件的 props 和 state。若是你想在静态方法中检查 props 的值，在调用处把 props 做为参数传入到静态方法。

6、表单组件

交互属性：

value，用于<input> <textarea> <select>组件

checked，用于<checkbox> <radio>

selected,用于<option>组件

表单组件能够经过 onChange 回调函数来监听组件变化。当用户作出如下交互时，onChange 执行并经过浏览器作出响应：

• <input> 或 <textarea> 的 value 发生变化时。
• <input> 的 checked 状态改变时。
• <option> 的 selected 状态改变时。

类型为  radio、 checkbox 的 <input> 支持  defaultChecked 属性，  <select> 支持  defaultValue 属性。

7、state和props

刚开始接触时，个人前辈就跟我说React里最重要的就是运用state和props，以前不明白，如今的我对新手说的话也是如此。

组件先根据本身的props渲染一次本身，props是不可变的，它们从父节点传递过来，被父节点拥有。

为了实现交互，咱们给组件引进了可变的state。this.state 是组件私有的，能够经过调用 this.setState() 来改变它，当状态改变时，组件从新渲染本身。

8、React的使用过程当中遇到的warning报错锦集

一、

这个问题不少见啊，我当时写咱们的AI-4.1列表时，用了Table组件，而后传进去的column里面也都有了key，可是仍是报错，以后经检查发现是<a><div>这两个子元素没有key来区分，因此分别加了key，而后warning就消失了

 

二、vendor.js:1658 Warning: Notice: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

出错场景：notice提示组件的出现隐藏

为了区分，传递了一个惟一标实的参数key，可是从文档信息看：

attempting to access this.props.key from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: <ListItemWrapper key={result.id} id={result.id} />). 

 

 

因而咱们改为经过传递id就能够了

PS：React中有两个比较特殊的参数：ref 和 key，不会被传递到组件

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component

三、vendor-6a78e5c….js:1698 Warning: Unknown prop `place` on <i> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

    in i (created by Rules (bindStores))
    in div (created by Rules (bindStores))
    in div (created by Rules (bindStores))

<i style={{float:'right',marginRight:'7px'}} data-tip={__('仅供查询报警对象名称')} place="top" className="iconfont tips">&#xe651;</i>

即一些自定义的元素，最好使用 data- 放在开头。

 

好了，本人不才，先到此为止。