- react安装
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')
);