React
一、环境搭建
Node.js+WebStorm+react.js
1.Node.js
官网下载:https://nodejs.org/en/
参考安装方法:https://blog.csdn.net/antma/article/details/86104068
(1) 修改环境变量
计算机->属性->高级系统设置->环境变量->系统变量->path编辑->将安装路径加入其中
(2) 测试
此时在命令窗口可以执行 node -v 和 npm -v 分别查看node和npm的版本号
(3) 配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间。所以这里配置自定义的全局模块安装目录,在node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd命令下执行如下两个命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为
“D:\Program Files\nodejs\node_modules”(根据自己的安装路径也可以)
最后编辑用户变量里的Path,将相应npm的路径改为:D:\Program Files\nodejs\node_global(根据自己的安装路径也可以)
(4) 内源配置
npm config rm proxy
npm config rm http-proxy
npm config rm https-proxy
npm config set no-proxy .huawei.com
npm config set registry https://registry.npm.taobao.org
完成配置,完成之后安装一个依赖包测试一下,正常安装即配置ok
2.Webstorm
推荐安装方法(破解方法):https://blog.csdn.net/qingsongzhinv/article/details/80281352
3.安装并测试react
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
浏览器输入地址localhost:3000/ 默认端口3000.
出现以下页面则为成功
二、入门学习
1.简介
React.js 是一个帮助你构建页面 UI 的库。React.js帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。
注:React.js 不是一个框架,它只是一个库。
附:什么是DOM
DOM即文档对象模型,是指当我们编写前端代码时,会生成一个document对象,通过这个对象我们可以获得页面上的节点,在运行阶段,也会生成DOM树。
2.在webstorm上配置和运行
(1) 右上角Add configuration,点击左上角“+”号,点击npm,Scripts设置为run
(2) 默认主文件为App.js,可写代码调试
(3) 更改程序入口
进入index.js页面,import想要导入的类和地址即可
3.元素渲染
元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。
要将React元素渲染到根DOM节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上(每个组件都需要有render方法,用于输出组件):
示例:
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello, world!</h1>;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
</html>
4.组件式管理
(1) 使用函数定义组件
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
(2) 使用ES6 class定义一个组件
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
(3) 向组件传递参数
<body>
<div id="example"></div>
<script type="text/babel">
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
</script>
</body>
(4) 多组件合成组件
<body>
<div id="example"></div>
<script type="text/babel">
function Name(props) {
return <h1>网站名称:{props.name}</h1>;
}
function Url(props) {
return <h1>网站地址:{props.url}</h1>;
}
function Nickname(props) {
return <h1>网站小名:{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="菜鸟教程" />
<Url url="http://www.runoob.com" />
<Nickname nickname="Runoob" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('example')
);
</script>
</body>
5.State和Props
(1) state:状态(可变)
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)
用来更新和修改数据
(2) props:(不可变)传递数据
6.组件生命周期
(1) Mounting:已插入真实 DOM
(2) Updating:正在被重新渲染
(3) Unmounting:已移出真实 DOM
(4) 方法:
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
官方文档:https://reactjs.org/docs/react-component.html#lifecycle-methods
7.Refs
可以通过ref来获取组件的引用
class MyComponent extends React.Component {
handleClick() {
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render() {
// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
{this.handleClick.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
学习资料推荐
React官方教程:https://react.docschina.org/tutorial/tutorial.html
Ant官网:https://ant.design/index-cn
入门推荐:http://www.ruanyifeng.com/blog/2015/03/react.html