项目中，遇到react组件需要渲染原生dom的情况，记录一下。
原理是利用ref在加载完后插入元素
其他前端有趣的例子和坑合集：
https://github.com/wqhui/blog
直接预览：
https://codepen.io/wqh/pen/YzyrNXB
const child =document.createTextNode("原生dom");
render(){
<div ref={(nodeElement) => { nodeElement && nodeElement.appendChild(child ) }} />
React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。例如就像下面的这样：
我们实际期待的效果是这样的：
幸运的是，虽然
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
render: function() {
return (
<input type="text" ref="myTextInput" />
<input type="button" value="Focus t
React组件插入流程1 简介React广受好评的一个重要原因就是组件化开发，一方面分模块的方式便于协同开发，降低耦合，后期维护也轻松；另一方面使得一次开发，多处复用称为现实，甚至可以直接复用开源React组件。开发完一个组件后，我们需要插入DOM中，一般使用如下代码ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementByI
PURE是treeshaking的时候用的，标志这是个纯函数。
新老版本的区别
在17之前，我们需要显示引入React，然后Babel转化为React.CreateElement方法，而新的版本中不需要显示引入React，react会自动转化为（Object.s_jsx）方法。
JSX只是react提供的一个语法糖，react元素是构建react应用的最小 单位。如，let elemtn = < d
React 动态增加，删除，上下移动dom在react的世界里，都是状态变更(数据变更)来驱动dom变化，动态添加dom不像以前用jquery一样append一个或者一个 这样了，而是通过装载 或者 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库。最终我选择的是用添加/移除数组中的元素来实现的；addElement = () => {var arr = this.stat...
最近做一个操作，点击新建公司，增加公司名称（可取消，保存），通过原生JS去增加节点，此时取消/保存按钮的this指向自身，不能去调用react方法，可以采用挂在在window上
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Button} from 'zent';
export default class station extends React.Component{
@黄琼，腾讯前端工程师，IMWeb团队成员，目前负责企鹅辅导
正文从这开始～～
很多人都使用过React，但是很少人能说出它内部的渲染原理。有人会说，会用就行了，知道渲染原理有必要么？其实渲染原理决...
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的，这些属性是应用程序中许多组件都需要的。这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。它们都是用来保存信息的，这些信息可以控制组件的渲染输出。react 的高阶组件可以看作是一个工厂函数，接收一个组件作为参数并返回一个具有新功能或特性的组件。
DOM元素中渲染html
dangerouslySetInnerHTML={{__html: “html字符串”}}
let htmlStr = "<li> <div class="sample-origin-tips"> <div class="tips-line"></div> <p class="tips-text">以下例句来源于网络，仅供参考</p> </div> <label>1</labe
