之前学习使用react整理一些知识
1. 关于React前的一些准备
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库，因此在使用React之前最好有以下基础
- html
- css
- JavaScript
个人使用的开发工具是webstrom
2. React安装
2.1 node.js
首先要安装node.js，以使用npm命令。
node.js官网地址
2.2 安装
安装命令
npm install -g create-react-app
2.3 创建React项目
安装完成之后就可以创建一个React项目
create-react-app my-app
其中的my-app是要创建的文件名
如果是使用westrom可以直接创建
创建完成后用cd命令cd到刚刚创建的文件夹中，执行
npm start
打开 http://localhost:3000 ，如果有此画面
创建成功
3. 文件目录
创建的React app目录如下
其中最关键的是src文件下的内容
3.1 App.js
代码内容如下
import logo from './logo.svg';
import './App.css';
function App() {
return (
);
}
export default App;
return里面的内容即是显示在网页中的内容，所使用的jsx代码结构与html非常相似，其中的className就是相当于class，对应css里相应的样式。
最下面的export default App;是将定义的App函数导出，可以在其他js文件中用import引入。
3.2 index.js
代码内容如下
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
其中import App from './App';就是引入了App.js中导出的App。
ReactDOM.render是React的最基本方法，用来渲染其中的元素，将模板转为html语言，并插入指定的DOM节点，
<React.StrictMode>
</React.StrictMode>
就是要渲染的内容，document.getElementById('root')则是要插入到root节点中，root节点在public文件夹下的index.html中 <div id="root"></div>。
4. 基础语法
直接通过修改index.js和App.js进行测试
4.1 组件
4.1.1 定义
注意组件名要是大写字母开头
import React from "react";
class App extends React.Component{
render(){
return（
）
}
}
export default App;
4.1.2 复合组件
通过创建多个组件来合成一个组件，即把组件的不同功能进行分离。
import React from "react";
class App extends React.Component{
render() {
return(
)
}
}
class Hello extends React.Component{
render() {
return(
hello
)
}
}
class World extends React.Component{
render() {
return(
world
)
}
}
组件Hello和World复合到组件App中，实现各自的功能。
4.2 渲染元素
4.2.1 使用function
类似刚开始App.js中的内容
function App() {
return (
hello world
);
}
这样return中的内容hello world就会通过index.js的ReactDOM.render被渲染到页面上
4.2.2 使用组件
将之前的function注释掉，代码改为
import React from "react";
class App extends React.Component{
render() {
return(
hello world
)
}
}
同样效果
4.3 状态state
state 可以根据与用户交互来改变，因此有些容器组件需要定义 state 来更新和修改数据。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
import React from "react";
class App extends React.Component{
constructor(props) {
super(props);
this.state={
num:1
}
}
render() {
return(
{this.state.num}
)
}
}
state中的数据就可以被渲染到页面上，需要用到setState
import React from "react";
class App extends React.Component{
constructor(props) {
super(props);
this.state={
num:1
}
}
add(){
this.setState({
num:this.state.num+1
})
}
render() {
return(
hello world
{this.state.num}
<button onClick={()=>this.add()}>add
)
}
}
在add函数中setState对num的值进行更新，这样每点一次按钮就可以令num的值+1，而其他元素无需重新渲染。
注意：如果在onClick中使用{this.add()}这样的写法，在render的时候它就会执行，这时候里面改变state,导致页面渲染，触发render,如此一直循环多次，报错。
4.4 props
state 和 props 主要的区别在于 props 是不可变的，子组件只能通过 props 来传递数据。
class App extends React.Component{
render() {
return(
)
}
}
class Hello extends React.Component{
render() {
return(
{this.props.hello}
)
}
}
子组件中使用
this.props.hello获取了父组件传递的参数hello。实际应用中可以将state和props混合使用，在父组件中设置 state， 并通过在子组件上使用 props 将其传递到子组件上。
浙公网安备 33010602011771号