【一起来烧脑】一步React.JS学会体系
[外链图片转存失败(img-cn4fbVDq-1563575047348)(https://upload-images.jianshu.io/upload_images/11158618-8c6f3d2b8ff0bec3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
React.JS是用于构建用户界面的JavaScript库
React.JS主要用于构建UI
下载使用：React.JS下载地址
<!DOCTYPE html>
<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
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-79UnLcN0-1563575047356)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
