React笔记整理

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

一、React是什么？

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

二、React的特点即它与其他js库相比好在哪里？

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

2、组件化，React顺应了web开发组件化趋势，从UI抽象出不同的组件，方便多次使用

3、提高造作性能，React抛弃html而应用JSX语法，因为DOM操作非常慢，所以引入虚拟DOM的概念

三、React精髓

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

四、JSX

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

五、组件

1、组件的初始化

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结构

2、生命周期函数     

装载组件触发：

（1）componentWillMount

只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 render

 

（2）componentDidMount

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

 

更新组件触发：

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

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

卸载组件触发：

componentWillUnmount

3、DOM操作

大部分情况下不需要查询DOM去更新新组件的UI，只需要通过设置组件的状态（setState），但是如何直接操作DOM呢？

（1）findDOMNode()

当组件加载到页面后可以通过findDOMNode（）方法拿到组件对应的DOM元素。

（2）ref

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

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

4、组件详细说明

static

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

六、表单组件

交互属性：

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

checked，用于<checkbox> <radio>

selected,用于<option>组件

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

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

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

七、state和props

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

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

为了实现交互，我们给组件引进了可变的state。this.state 是组件私有的，可以通过调用 this.setState() 来改变它，当状态改变时，组件重新渲染自己。

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

1、

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

 

2、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

3、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"></i>

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

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