本文已参与「新人创作礼」活动，一起开启掘金创作之路。
本文为整理自己初入react学到的东西以便备忘 我的react之旅是从官网开始,以一个联系项目的启动开始,一周进入公司项目,使用react至今有两个月了,有个空来记录一下,内容简单,有不足或者错误欢迎指出
一 如何开始一个react项目
(首先我是先去参照官网做了个井字棋,大概体验下使用,总结一下react项目的开始)
1.然后搭建本地环境(当然大家也可以再浏览器环境) 安装node.js 使用Create React App创建项目
npx create-react-app my-appcd my-appnpm start2.了解文件目录后,开始协议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了.
