React JS 基础知识17条
1. 基础实例
<!DOCTYPE html><html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
说明：
(1).react.js：React 的核心库。
(2).react-dom.js：提供与 DOM 相关的功能。
(3).Browser.js：将 JSX 语法转为 JavaScript 语法。这一步很消耗时间，实际上线的时候，应该将它放到服务器完成，操作如下：
$ babel src --out-dir build
将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。
(4).text/babel：凡是使用 JSX 的地方，都要加上 type="text/babel"。
2. ReactDOM.render()
用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(<h1>Hello, world!</h1>,
document.getElementById('example')
);
3. JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
4. React.createClass()
生成一个组件类。
5. class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
6. React.Children.map()
用来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 、object 、array。
this.props.children 的值有三种可能：
数据类型undefined：当前组件没有子节点;
数据类型object：有一个子节点；
数据类型array: 有多个子节点。
var NotesList = React.createClass({ render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.body
);
姊妹属性还有：
React.Children.map ：遍历，返回对象
React.Children.forEach ：遍历，不返回对象
React.Children.count ：返回 children 当中的组件总数
React.Children.only ：返回 children 中仅有的子级。否则抛出异常
7. 组件类的 PropTypes 属性，就是用来验证组件实例的属性是否符合要求
var MyTitle = React.createClass({ propTypes: {
title: React.PropTypes.string.isRequired,//只接受string类型的，且必须传
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
姊妹属性：
React.PropTypes.arrayReact.PropTypes.bool
React.PropTypes.func
React.PropTypes.number
React.PropTypes.object
React.PropTypes.string
React.PropTypes.node // 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
React.PropTypes.element // React 元素
React.PropTypes.instanceOf(Message) // 用 JS 的 instanceof 操作符声明 prop 为类的实例
React.PropTypes.oneOf(['News', 'Photos']) // 用 enum枚举 来限制 prop 只接受指定的值。
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number,React.PropTypes.instanceOf(Message)]) // 指定的多个对象类型中的一个
React.PropTypes.arrayOf(React.PropTypes.number) // 指定类型组成的数组（如只接受数字组成的数组）
React.PropTypes.objectOf(React.PropTypes.number) // 指定类型的属性构成的对象（如只接受数字组成的对象）
React.PropTypes.shape({color: React.PropTypes.string,fontSize: React.PropTypes.number}) // 特定形状参数的对象（字符串颜色，数字字体）
以后任意类型加上 'isRequired' 来使 prop 不可空。
React.PropTypes.func.isRequired
React.PropTypes.any.isRequired //不可空的任意类型
8. getDefaultProps()设置组件属性默认值
var MyTitle = React.createClass({ getDefaultProps : function () {
return {
title : 'Hello World'//没传递就用默认值
};
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.body
);
9. ref 获取真实DOM
React组件生成的是虚拟DOM，只有插入到页面中后才能变成真实的DOM。
任何DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
var MyComponent = React.createClass({ handleClick: function() {
this.refs.myTextInput.focus();// this.refs.myTextInput 获取真实的Input DOM
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
说明：
(1) 由于真实DOM发生在虚拟DOM之后，所以this.refs.[refName]必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。
(2) ref是获取当前节点的真实DOM；this.getDOMNode()是获取真个组件的真实DOM；两者都必须要在组件加载完成后使用。
10. React 事件
剪贴板事件：
onCopy
onCut
onPaste
键盘事件：
onKeyDown
onKeyPress
onKeyUp
鼠标事件：
onClick
onDoubleClick
onDrag
onDragEnd
onDragEnter
onDragExit
onDragLeave
onDragOver
onDragStart
onDrop
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onWheel ：鼠标滚轮滚动事件
触摸事件：
onTouchCancel
onTouchEnd
onTouchMove
onTouchStart
焦点事件：
onFocus
onBlur
表单事件：
onChange
onInput
onSubmit
UI 事件：
onScroll
事件说明参考：http://reactjs.cn/react/docs/events.html
11. this.state 和 this.props
每个React组件都是一个状态机，一旦状态改变（与用户发生交互）就会重新渲染组件，这就是 this.state。
每个组件又有初始化所需要的数据，一旦初始化完成，该数据就不再变动，这就是 this.props。
var LikeButton = React.createClass({ getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
12. 表单
表单包括：input、textarea、checkbox、radio、option.
监听表单组件变化使用 onChange 事件，通过以下属性获取对应值：
value：表单input、textarea;
checked：表单checkbox、radio；
selected：表单option。
var Input = React.createClass({ getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.body);
13. 组件生命周期
生命周期三个状态：
（1）Mouting：已插入真实 DOM
（2）Updating：正在被重新渲染
（3）Unmounting：已移出真实 DOM
三个状态对应 5 个函数 + 2 个特殊处理：
（1）componentWillMount：初始化渲染之前调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不在调用）。
允许调用setState()，组件直接使用新的state，而不会引起第二次渲染。
（2）componentDidMount：初始化渲染之后调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不在调用）。
jQuery操作DOM（如ref、getDOMNode使用）、调用外部JS方法（通过props传递）等都可以在这里操作。
（3）componentWillUpdate：修改props/state 重新渲染之前调用（第一次渲染时不调用）。
不允许调用setState()，会造成死循环。
（4）componentDidUpdate：修改props/state 重新渲染之后调用（第一次渲染时不调用）。
不允许调用setState()，会造成死循环。
jQuery操作DOM（如ref、getDOMNode使用）、调用外部JS方法（通过props传递）等都可以在这里操作。
（5）componentWillUnmount：组件被移除时调用（比如在div中渲染组件1，然后再渲染组件2,此时组件1被移除）。
执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。
（6）componentWillReceiveProps(object nextProps)：修改props 重新渲染 之前调用（第一次渲染时不调用；如果props和之前一样，也会执行）。
允许调用setState()，组件直接使用新的state，而不会引起第二次渲染。
该方法中this.props可以获取老props，参数nextProps才表示新的props。
（7）shouldComponentUpdate：是否需要重新渲染组件。修改props/state 重新渲染之前调用（第一次渲染时不调用）。
true 表示需要重新渲染；false 表示不需要重新渲染，即不会调用后续的componentWillUpdate 和 componentDidUpdate。
优化性能的关键函数：该方法可以实现新老props 和 state 的比对逻辑，自定义是否重新渲染。组件较多时，可提升性能。
总结：
各个生命周期函数的先后顺序：
初始化渲染阶段：componentWillMount > componentDidMount
修改state 阶段：shouldComponentUpdate > componentWillUpdate > componentDidUpdate
修改props 阶段：componentWillReceiveProps > shouldComponentUpdate > componentWillUpdate > componentDidUpdate
旧组件卸载阶段：旧组件 componentWillUnmount > 新组件生命周期
生命周期测试实例：
<!DOCTYPE html><html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState: function () {
console.log('组件1getInitialState被执行');
return {
name: this.props.name
};
},
componentWillMount: function() {
console.log('组件1：componentWillMount');
},
componentDidMount: function() {
console.log('组件1：componentDidMount');
},
componentWillUpdate: function() {
console.log('组件1：componentWillUpdate');
// this.setState({name: '内部componentWillUpdate更新state'});//会造成死循环，一直加载组件
},
componentDidUpdate: function() {
console.log('组件1：componentDidUpdate');
},
componentWillUnmount: function() {
console.log('组件1：被卸载：componentWillUnmount');
},
componentWillReceiveProps: function(nextProps) {
console.log('组件1：componentWillReceiveProps：老props：'+this.props.name+';新props：'+nextProps.name);
},
shouldComponentUpdate: function() {
console.log('组件1：shouldComponentUpdate');
return true;// true 表示需要重新渲染；false 表示不需要重新渲染，即不会调用后续的componentWillUpdate和componentDidUpdate。
},
handleClick: function(event) {
console.log('修改state重新渲染组件1：');
this.setState({name: '内部更新state'});
},
render: function () {
return (
<div onClick={this.handleClick}>
Hello {this.state.name}
</div>
);
}
});
var Hello2 = React.createClass({
getInitialState: function () {
console.log('组件2：getInitialState被执行');
return {
name: this.props.name
};
},
componentWillMount: function() {
console.log('组件2：componentWillMount');
},
componentDidMount: function() {
console.log('组件2：componentDidMount');
},
componentWillUpdate: function() {
console.log('组件2：componentWillUpdate');
},
componentDidUpdate: function() {
console.log('组件2：componentDidUpdate');
},
componentWillUnmount: function() {
console.log('组件2：被卸载：componentWillUnmount');
},
componentWillReceiveProps: function(nextProps) {
console.log('组件2：componentWillReceiveProps：老props：'+this.props.name+';新props：'+nextProps.name);
},
shouldComponentUpdate: function() {
console.log('组件2：shouldComponentUpdate');
return true;
},
render: function () {
return (
<div>
Hello {this.state.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
setTimeout(function(){
console.log('修改props重新渲染组件1：');
ReactDOM.render(
<Hello name="world2"/>,
document.getElementById('example')
);
}, 3000)
setTimeout(function(){
console.log('初始化渲染新组件2：');
ReactDOM.render(
<Hello2 name="组件2 world2"/>,
document.getElementById('example')
);
}, 6000)
</script>
</body>
</html>
View Code
14. React组件样式
React采用行内样式，它接受的必须是一个对象，行如：
style={{display:'none'}}
第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。
说明：
（1）React 行内样式采用驼峰形成，且不支持CSS中的'-'形式表示,如z-index 需写成 zIndex。
（2）浏览器前缀的样式（如-webkit-transition），首字母必须大写，但是ms 开头的例外。
var divStyle = { color: 'white',
zIndex: 1000,
paddingTop:"10px",
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // 注意这里的首字母'W'是大写
msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
};
React.render(<div style={divStyle}>Hello World!</div>, mountNode);
15. Ajax请求
在实际项目中，我们通常是只把React 用于DOM渲染，而Ajax请求和逻辑判断放在外部JS中。
如果想在React组件中调用Ajax，可以在 componentDidMount 方法中发起 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。
var UserGist = React.createClass({ getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
16. getInitialState()
初始化渲染之前调用（只在第一次渲染时调用，后续重新渲染、修改props/state 都不再调用）。
所以 getInitialState 中使用props 赋值时，后续重新渲染组件，state 的值将不会被新 props 覆盖。
getInitialState 的执行早于生命周期中的其他方法。
17. getDOMNode()
获取 React 组件的 DOM 结构。一般我们会在 componentDidMount 、componentDidUpdate 中使用，用于调用调用第三JS组件（因为第三JS组件都需要DOM结构）。
参考：http://blog.csdn.net/lihongxun945/article/details/46640225
整理自：http://www.ruanyifeng.com/blog/2015/03/react.html
以上是 React JS 基础知识17条 的全部内容， 来源链接： utcz.com/z/382273.html
