react的应用之道——实践&&领悟

悠悠 2022-07-13 18:19 167阅读 0赞

*最近更新时间：2017年3月1日16:26:12*

[《我的博客地图》][Link 1]

随着2017年春节的热闹喜气逐渐消去，各行各业都已步入正轨，作为奋斗在一线的初级程序员来说，应该鼓起精神积累博客内容。自年后至今，开始写第一篇，主要围绕目前正在开发的项目展开讨论。

react项目中的遇到的问题：

1、新建了一个子组件，插入到父组件中，子组件渲染出的结果为以子组件命名的XML标签，而不是子组件中render方法的return结果。

在正常情况下，子组件渲染出的结果为，子组件中render方法的return结果，即div标签。

问题原因：react组件的命名规则，首字母必须大写。

React的JSX语法使用大、小写的约定来区分本地组件的类和 HTML 标签。但注意两点:JSX语法中，HTML标签和组件标签的class和for属性必须使用className和htmlFor来做对应的属性。

2、react构建的应用，input元素和textarea元素的值如何取到，如何实时更新到元素的属性（value）中。

如果像HTML页面那样不做任何处理，去向这两个元素写入数据，然后通过$(input).val();或this.refs.input01.value;两种方法去读取（拿）数据，结果为空。

因为肉眼看到input元素和textarea元素已经键入内容，但是react中的元素属性（value）并没有实时更新，需要对input元素和textarea元素做特殊处理。如下：

emailChange(event)\{  
                this.setState(\{email: event.target.value\})  
        \}

在元素上需要绑定onChange事件，然后通过event.target.value方法获取到值，再更新组件状态state，组件状态改变，组件会重新渲染调用render方法，元素通过value=\{this.state.email\}更新value属性，即可取到数据。

this.state.email || $(input).val() || this.refs.input.value，取数据没有区别，但是写入数据有区别：

写入不可见数据，可以用this.refs.input.value="sometext"，或，$(input).val("sometext")，通过refs属性操作元素，不调用render方法，不重新渲染页面；

写入可见数据必须用react的状态属性state控制：

this.setState(\{email: event.target.value\})

3、写好了一个页面，渲染出空页面，没有任何结果。

问题原因：组件中render方法返回值的编码规范，return关键字的同一行必须有代码，或者为左div，或者为左括号。（相关问题：有一次另一个问题报错，官网解释，rerun返回值不能为花括号\{\}包围的变量，编码规范为，最外层必须为XML标签，并且只能有一个，不能有兄弟XML标签）

4、父子组件传递参数

情景一：父组件A需要向子组件B传递参数

父组件调用子组件B的时候，在<b isdisplay=\{true\}></b>元素上加入需要传递的参数，同时，在B组件的props属性中声明并初始化相同名称的属性this.props.isdisplay

子组件B本身封装（暴露）了很多props属性，在父组件A调用B时，可以直接向相应的props属性传入数据。

情景二：父组件A需要向孙子组件C传递参数，中间有子组件B存在，B调用了C组件

A调用C的时候，需要传入属性isdisplay，此时需要在B组件的props属性中声明并初始化isdisplay属性，同时在B组件调用C组件<C isdisplay=\{this.props.isdisplay\}></C>时，在C组件的属性中传入isdisplay属性。

5、写好一个组件页面，浏览器没有渲染出任何结果，显示空白页面。

问题原因：react的render方法语法格式错误

render()\{\}方法中的return返回内容格式要求，和return同一行必须有内容，并且返回的标签元素最外层只能有一个元素，形如：

return (

)

retuern <div>

...

</div>

6、组件的setState方法，传入参数详解，什么时候需要用回调函数？

this.setStete(\{\},()=>\{\});//组件状态量，回调函数

如下情况，由于setStete方法是异步执行，所以直接在setStete方法后取重置的state状态量，有可能取到的是重置之前的值，因此需要用到回调函数，保证了state状态量重置成功后再取值，肯定取到的是重置后的值。

this.setState(\{  
    pageNum: this.state.pageNum + 1  
\});

console.log(pageNum);//pageNum || pageNum + 1

改造如下：

this.setState(\{ pageNum: this.state.pageNum + 1\},()=>\{ console.log(pageNum);\});

总结：回调函数存在的功能，异步方法执行成功后再执行回调函数内容，即“异步方法同步化”。

7、组件状态量的初始化两种方法：

ES6语法中，可以在constructor方法中初始化，如下：

constructor(super)\{

props(super);

this.state(\{

name: "nickname",

\});

react原生语法如下：

getInitialState() \{  
    return \{

name: "nickname",

\};  
\}

8、react组件的结构与数据和逻辑无关

选用react框架搭建的web应用，最高效的事情就是，组件可以一次封装，多次调用，也就是说开发的所有组件都是可复用高复用度组件。

因此，需要理清一个思路，数据与逻辑和组件结构无关，对于具体需求的页面，可以用多个组件拼装而成，每个组件没有具体的数据和逻辑，页面的数据和逻辑在所有组件布局成功之后再添加。

9、对于list页面的路由配置

场景：比如员工信息列表，每一项对应一个人的详情页面，详情页面的布局完全相同

这种情况下需要用到react-router的路由参数功能，在路由配置的时候，增加一条参数配置

path: 'employee'//列表页路由配置  
path: 'detail/:employeeId'//详情页路由配置，path 属性中的 :employeeId就是该路由的参数params

<a href=\{this.contextPath + "/app/employee" + result.success.data.employeeId\}>//列表每项跳转路径  
this.props.params.employeeId;//详情页路由具体实现，React Router 将路由的数据都通过 props传递给了页面组件，从而可以访问路由相关数据了。

10、遇到Maximum call stack size exceeded栈溢出问题总结

案例一：语法逻辑错误

11、组件状态变量个数的控制：由已经定义的state经过运算得到的值不能再定义为state变量

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440