react基础学习
2017-06-11 12:08
423 查看
react安装
react官网
react.min.js核心库
react-dom.min.js提供与DOM相关的功能
babel.min.js内嵌JSX的支持
在浏览器中打开http://localhost:3000/
2.JXS
- 代码嵌套多个html标签时，使用div包裹
- 添加自定义属性需要使用data-前缀
- 表达式使用花括号{}
- JSX中不能使用if-else，可以使用三元运算
- react推荐使用内联样式，class改为className，for改为htmlFor。元素数字后自动添加px
- 标签内部注释需要花括号{}，标签外不需要
- 允许在末班在插入数组，数组会自动展开所有成员
- JSX中html标签使用小写，自定义的组件使用大写字母开头
3.react组件
使用React.createClass方法生成组件类，组件名必须要使用大写字母开头。
ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠”/”的尖括号包围的。
4.state状态
react组件可以看成是一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
5.props属性
props是不可变的， 子组件只能通过 props 来传递数据。
通过getDefaultProps方法，设置默认值，
组合使用 state 和 props ，可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。
通过使用propTypes实现验证， React.PropTypes提供很多验证器 (validator) 来验证传入数据是否有效当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
6.组件API
设置状态：setState；
替换状态：replaceState，replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除；
设置状态：setProps，props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中；
替换状态：replaceProps；
强制更新：forceUpdate方法，适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()；
获取DOM节点：findDOMNode；
判断组件挂载状态：isMounted，用于判断组件是否已挂载到DOM中，可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
7.生命周期：初始化、运行时、销毁
（1）初始化
- getDefaultProps：初始化组件属性的默认值，只调用一次
- getInintialState：初始化每个实例的状态
- componentWillMount： 在渲染前调用，可以修改状态
- render：渲染组件时
- componentDidMount : 在render完成后 组件渲染到页面时触发，之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
（2）运行阶段
- componentWillReceiveProps ：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate ：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。返回false时阻止render调用。
- componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。但不能修改props和state。
- render：渲染组件。
- componentDidUpdate ：在组件完成更新后立即调用。
（3）销毁阶段
- componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。
8.表单和事件
onChange方法和onClick方法
在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上
9.Refs
ref可以用来绑定到 render() 输出的任何组件上
react官网
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
react.min.js核心库
react-dom.min.js提供与DOM相关的功能
babel.min.js内嵌JSX的支持
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
在浏览器中打开http://localhost:3000/
2.JXS
- 代码嵌套多个html标签时，使用div包裹
- 添加自定义属性需要使用data-前缀
- 表达式使用花括号{}
- JSX中不能使用if-else，可以使用三元运算
- react推荐使用内联样式，class改为className，for改为htmlFor。元素数字后自动添加px
- 标签内部注释需要花括号{}，标签外不需要
- 允许在末班在插入数组，数组会自动展开所有成员
- JSX中html标签使用小写，自定义的组件使用大写字母开头
3.react组件
使用React.createClass方法生成组件类，组件名必须要使用大写字母开头。
ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠”/”的尖括号包围的。
4.state状态
react组件可以看成是一个状态机，通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
5.props属性
props是不可变的， 子组件只能通过 props 来传递数据。
通过getDefaultProps方法，设置默认值，
组合使用 state 和 props ，可以在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。
通过使用propTypes实现验证， React.PropTypes提供很多验证器 (validator) 来验证传入数据是否有效当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
propTypes: {
title: React.PropTypes.string,
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
},6.组件API
设置状态：setState；
替换状态：replaceState，replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除；
设置状态：setProps，props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中；
替换状态：replaceProps；
强制更新：forceUpdate方法，适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()；
获取DOM节点：findDOMNode；
判断组件挂载状态：isMounted，用于判断组件是否已挂载到DOM中，可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
7.生命周期：初始化、运行时、销毁
（1）初始化
- getDefaultProps：初始化组件属性的默认值，只调用一次
- getInintialState：初始化每个实例的状态
- componentWillMount： 在渲染前调用，可以修改状态
- render：渲染组件时
- componentDidMount : 在render完成后 组件渲染到页面时触发，之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
（2）运行阶段
- componentWillReceiveProps ：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate ：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。返回false时阻止render调用。
- componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。但不能修改props和state。
- render：渲染组件。
- componentDidUpdate ：在组件完成更新后立即调用。
（3）销毁阶段
- componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。
8.表单和事件
onChange方法和onClick方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
</script>
</body>
</html>
在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上
9.Refs
ref可以用来绑定到 render() 输出的任何组件上
var MyComponent = React.createClass({
handleClick: function() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
},
render: function() {
// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- React基础语法学习
- react native 开发基础=javaScript=学习笔记----函数
- React Router基础学习笔记
- React学习（一）——基础项目搭建以及环境配置
- React基础的学习
- react学习笔记1--基础知识
- React学习笔记——基础
- React学习(八)：Redux基础
- React入门基础（学习笔记）
- 如何零基础学习React Native开发？
- react学习总结2--基础（二）
- React_Native 再学习5--TypeScript学习1_基础语法
- React-Native 基础学习入门指南
- React Native 从零到高级- 0基础学习路线
- react学习总结1--基础（一）
- 学习ReactNative笔记整理一___JavaScript基础
- react-native 基础知识的学习
- react基础学习小demo汇总
- React 基础 学习笔记
- react学习笔记 item1 --- 基础入门