React 初学

　　今天是第一次在博客园写博客，很生疏哈哈~~

　　我学习前端大概有小半年左右，起初完全是因为兴趣。其实学习一门计算机语言着实不容易，但也多亏了许多博客网站的大神们的分享吸收了不少的经验。如今我也大三了，打算走程序员这条路，那最近也是为了工作，打算整合一下所学的知识，同时，最近跟着学长在做学校学生处的一个项目，学长决定用react开发，刚刚学完vue，vue-router，vuex等等的我。。。。。。。很难瘦~~哈哈！昨天详细的看了一遍react文档，当然是中文了哈（ps：毕竟才学完vue嘛，还是中文看的方便），主要是任务急哈，先中文撸了一遍，大概了解了一下react，已经初步会使用了，其实并不是很难。但众所周知嘛英文文档是必须要看的哈~我只能过两天再补上了。。。。。。

　　这次随笔主要是摘抄文档上的一些小例子，及react的初阶用法，以免在这次的项目中我可以方便的查询哈~毕竟是大白话哈哈！！！当然许多很简单的内容我也相应的略去了，主要记载一些用法和一些值得注意的地方，而且为了记忆，当然所有的内容都是我自己亲手敲的。不过毕竟我个人主要还是比较喜欢vue，那么react后续的一些自己的理解和深入的研究以及redux等等，在后续的博客肯定会继续探讨的，由于我本身已经看过一遍了，而且已经实践过大部分内容，所以本篇只是简记一下，那先开始今天的学习哈！

1.简单的React例子

ReactDOM.render(
   <h1>hello, world</h1>,
   document.getElementById("root")
)；
 
　　形如 const ele = <h1>hello world</h1>
　　其中可任意使用表达式，但要扩在大括号里
　　闭合式标签如  < input  />
　　注 ： 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称
　　Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用，以下两个代码功能相同
　　
const ele = (
　　<div className="fu">
　　　　hello
　　</div>
);

const ele = React.creatElement(
　　div,
　　{ className : "fu"},
　　"hello"
)
 
　　ReactDOM.render(
　　　　ele,
　　　　document.getElementById("root")
　　)
 
　　函数定义组件： 
　　function component(props) {
　　　　return <div>hello world</div>
　　}
　　
　　es6的class定义组件：
　　　　class component extends React.Component {
　　　　　　render() {
　　　　　　　　return <div>hello world</div>
　　　　　　}
　　　　}
　　注： react会把户自定义组件的属性以props对象的形式传到这个组件中,其实好比上文（刚才我写的）中react.createElement方法中第二个参数也是以对象形式写入
　　

　　组件名开头必须大写！！！！！！！

　　组件的返回值只能有一个根元素！！！！！（记得用div包裹）

　　所有的组件必须像使用纯函数那样使用他的props，就是只读！！！

 

5.state&生命周期 （ps：此处十分简单，但一定要好好看，写的话篇幅太大，我就偷个懒哈，请注意下this.state初始化&super（props））

　　几个定义： 

　　　　　　挂载： 组件加载到DOM上 componentDidMount（） 

　　　　　　卸载 ： 组件生成的DOM移除 componentWillUnmount()

　　　　　　请好好看react文档中clock的实现方法，很基础我就不做一一赘述了(点击跳转哈)

　　

　　state三点注意：

　　　　1.不要直接更新状态，请使用setState()

　　　　2.状态更新可能是异步的（我就遇到过这样的问题，由于当时没看react文档就开始敲项目，所以我用了promise，有点傻哈哈！！）

　　　　　setState()来接受一个函数而不是一个对象，函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数

　　　　3.状态更新合并（这里是浅合并）

　　

数据自顶向下流  一定了解一下哦！

 

6.事件处理

  • React事件绑定属性的命名采用驼峰式写法，而不是小写。
  • 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
  • 不能使用return false 阻止默认事件，请使用preventDefault()方法

 　　谨慎对待jsx回调函数的this，三种方法：

　　　1. this.handle = this.handle.bind(this)推荐

　　　2.handle() => {...some code}

　　　3.形如<button onClick={(e) => this.handleClick(e)}>

向事件处理函数传递参数：事件对象要最后传入事件处理函数

 

7.条件渲染

　　比较有意思的是{someCode && <div>hello world</div>} 用法着实很方便，很是推荐

　　或者是三目运算符{someCode ？ chooseOne ： chooseAnother}二者用法和js用法一样

 

8.列表&keys

　　其实同vue的for差不多，react文档中用map循环遍历数组，创建多个li，同时为每个li标签写入属性key，注意key的值不必在全局唯一，但在兄弟节点必须唯一，

在文档中后面的高级指引也有提到key提升性能的好处，同时注意，key只会给react提示，并不会传入到你的组件中，所以在组件中你是访问不到props.key的

 

9.表单

input，textarea， select

　　受控组件 ： 将表单元素value状态放到state里，在事件处理函数内用setSate（）更新

　　当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。且当你想为name值不同的input使用同一个事件函数更改同一个状态那么不妨 this.setState({[name]: value})

 

10.状态提升

　　就是当你想让多个兄弟组件的同一个状态互相关联时，你可以把这个状态提升到父组件的state中，将改变这个状态的事件处理函数也相应的提升到父组件中，然后在子组件中利用props

将父组件的状态继承下来，同时在子组件中利用props.eventHandle改变继承的props，因为props只读的特性所以只能利用这种方法在父组件中更改state来影响子组件继承的props

 

11.组合vs继承 建议使用组合来复用组件之间的代码

　　1.一些组件（Sidebar， Dialog）开始时不知道自己的子组件，建议用props.children代替子组件，即父组件标签内的任何内容（即子组件 + 其内容）都将通过children传入父组件中，如果你不想使用　　　children或者children不方便使用时，你可以使用自己定义的属性（将一些组件用{}赋值给子组件的属性），并在父组件中利用props引入组件　

12.react理念　

　　其实如果你详细的阅读一下文档你就会发现，其实react理念和我们正常开发项目的步骤很是一致

　　第一步：其实就是把你想要做的UI界面大体的划分一下，划分一下不同功能的组件

　　第二步：用react创建一个静态版本，就是大体构建项目的UI框架

　　第三部：找出最小的state状态集，不要重复状态（记得上文提到的状态提升么），不要写一些不必要的state

　　第四步：确定你的状态位于哪里，由于react的数据单项流动特性，还是记住状态提升作参考，减少复用state，将组件写在高一级的组件中

　　第五步：添加反向数据流，顾名思义，通过底层表单改变上级组见的state，例如input的onChange事件函数通过setState更改父级的state

 

总结：以上就是react的初阶学习，其实react的许多特性（如单向数据流，组件化，state，props等等）保证了react代码的清晰性和可读性，那这高效的可读性也为我们学习他人的代买提供了很大的方便，总的来说react很容易入门（当然我目前也才刚刚踩到门槛），开发时条理性也极强，为我们提供了许多方便的逻辑思考方法，那么后续的学习肯定是要的（主要是高级指引有两个地方没怎么看懂哈），下篇应该是vue的复习了，我们下篇再见喽！！

 

 　　
 
　　
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

posted on 2017-11-15 09:48  IsLennie  阅读(172)  评论(0)  编辑  收藏  举报