一起来烧脑一步React.JS学会体系
Posted 达达前端小酒馆
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一起来烧脑一步React.JS学会体系相关的知识,希望对你有一定的参考价值。
<html>
<head>
<meta charset="UTF-8" />
<title>Hello 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">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
通过npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
$ cnpm install [name]
使用create-react-app快速构建
create-react-app 自动创建的项目是基于 Webpack + ES6
cnpm install -g create-react-app
create-react-app my-app
cd my-app/$ npm start
React.JS使用JSX来替代常规的javascript
使用JSX
JSX看起来类似HTML。
实例:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
样式
React.JS 推荐使用内联样式
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}></h1>,
document.getElementById('example')
);
注释
注释需要写在{}中
数组
JSX 允许在模板中插入数组,数组会自动展开所有成员
实例:
var arr = [
<h1>123</h1>,
<h2>welcome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
组件使应用更容易管理。
实例:
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World!</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
如果需要向组件传递参数,可以使用this.props对象。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="coding" />,
document.getElementById('example')
);
状态
class Clock extends React.Component {
constructor(props) {
super(props); this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
React.JS Props
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="123" />,
document.getElementById('example')
);
可以通过getDefaultProps()方法为props设置默认值。
var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: '123'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);
React.JS API
设置状态--setState
替换状态--replaceState
设置属性--setProps
替换属性--replaceProps
强制更新--forceUpdate
获取DOM节点--findDOMNode
判断组件挂载状态--isMounted
组件生命周期状态
组件的生命周期可以分为三个状态:
mounting--已插入真实DOM
updating--正在被冲洗渲染
unmounting--已移出真实DOM
点关注,有好运
以上是关于一起来烧脑一步React.JS学会体系的主要内容,如果未能解决你的问题,请参考以下文章