react初学-记录

本文为整理自己初入react学到的东西以便备忘
我的react之旅是从官网开始,以一个联系项目的启动开始,一周进入公司项目,使用react至今有两个月了,有个空来记录一下,内容简单,有不足或者错误欢迎指出

一 如何开始一个react项目

(首先我是先去参照官网做了个井字棋,大概体验下使用,总结一下react项目的开始)

1.然后搭建本地环境(当然大家也可以再浏览器环境)
安装node.js
使用Create React App创建项目
npx create-react-app my-app
cd my-app
npm start
2.了解文件目录后,开始协议helloworld

二 jsx语法

提到react, jsx是必然要提的模板语言了,但它并不是jsx专有的,但是建议再react中使用jsx,很大程度提高了代码可读性和可维护性.

const name = "wang";
const age = "18";
const person = <span>{name} +"的年龄是" + {age}</span>;
const object = (<img src= "#" />);
const arr [ <li>1</li>, <li>2</li> ];

三 渲染和組件

1.假设有一个根组件id名为root
要将一个元素渲染入根元素,要使用到一个ReactDom,render()的方法渲染

const ele = <div>hello-world</div>
ReactDom.render(ele,document.getElementById("#root"));

2.然而,随着页面增多,代码复杂度增加,我们要渲染的往往不止一个简单元素,当然,我们可以把它作为一个组件

// 两种方式创建组件:
// 1.Es6的class
class Page1 extends React.Component{
	render() {
		return (<div>hello,world</div>);
	}
}

// 2.函数方式
function Page2(props){
	return (<div>{props}</div>);
}

3.组件是通过props在父子组件中传递数据的

因为react中处处皆组件的特性,基本props很常用 这里有几点强调
1.单向数据流,数据从父组件传向子组件,即,props是子组件用来取父组件数据的
2.子组件取到父组件props后不可更改
3.如果子组件想要改变父组件的数据,必须使用父组件传递下来的方法
4.路由上的参数在props.match.param
5.如果组件有多处使用,需要重新渲染,可以给组件设置key属性,并且每次重新渲染改变它

四 UI框架

ant-design, bootstrap, material-ui, element-ui…很多,我使用的是ant.
主要就是看数据绑定,表单,数据录入,数据展示,模态框…Api都是一看就会,可以现学现用.
很多公司还会在框架之上封装适用于本公司的框架,如果能看到源码的话,可以看看

五 生命周期

为什么把生命周期放在最后呢,我觉得,在一开始学习的时候我们对生命周期上的钩子其实用的还是少,当基础的都了解后,再去看生命周期,这会更容易了解和使用.

// react的生命周期分为三个大阶段: 挂载,更新,卸载 
//挂载:   
constructor()  //(就必须写super(),否则会导致this指向错误) 
componentWillMount() //第一次渲染前
componentDidMount() //第一次渲染后 
//更新: 
componentWillReceiveProps(nextProps)   //接收到的新的props前,nextProps就是待上位的props 
shouldComponentUpdate(nextProps,nextState)  //唯一决定是否继续更新的生命周期,返回false即不更新 
componentWillUpdate(nextProps,nextState)  //更新前 
componentDidUpdate(nextProps,nextState)  //更新后 
//卸载 
componentWillUnmount() //卸载前

还有redux,router等一些都没有写,但是不想写了,先这样…
有一个node版本管理器nvm很好用诶,比较适用于多个项目不同node版本的切换,在这里就可以安装多个版本的node了.