请问怎么学习react.js

Posted 2023-04-30

参考技术A 一、JSX介绍
①定义
JSX=JavaScript XML，是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作，但是使用JSX可以提高组件的可读性，增强JS语义，结构清晰，抽象程度高，代码模块化。因此推荐在React中使用JSX。
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词，如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值：JSX将两个花括号之间的内容...渲染为动态值，花括号指明了一个javascript上下文环境,花括号里面可以是一个变量，也可以是函数。 例如：

var name=“winty”;

<p>name</p>
function date(d)
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
;
<p>date(new Date()</p>

2.注释：首先，在子节点中注释要用大括号包裹起来，然后就可以单行注释/**/，也可以多行注释//。

var Hello=React.createClass(
render:function()
return <p name="winty"> //set name
Hello ,World
/*
多行注释
多行注释
*/
</p>

);

3.使用CSS内联样式

var style=
color:#000;
;
React.render(<div style=style>....</div>,document.body);

4.使用条件判断

//方法1，三目运算符
var Hello=React.createClass(
render:function()
return <p>Hello,this.props.name?this.props.name : "LuckyWinty"</p>

);

//方法2，if-else语句
var Hello1=React.createClass(
getName:function()
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function()
return <p>Hello,this.getName</p>

);

//方法3，使用逻辑||运算符
var Hello3=React.createClass(
render:function()
return <p>Hello,this.props.name||"LuckyWinty"</p>

);

④非DOM属性介绍
JSX中有3个非DOM属性，分别是：dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML：在JSX中直接插入HTML代码，但是如果能避免使用这个属性则尽量避免使用。
不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候，经常会出现错误，不合适的净化也是导致网页攻击 的原因之一。
在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据。例如：

function createMarkup()
return __html: 'First · Second';
;
<div dangerouslySetInnerHTML=createMarkup() />

ref：父组件引用子组件，你可以通过在属性中设置期望的引用名来定义一个引用。例如：

...
render:function()
return <div>
<input ref="MyInput" .../>
</div>

...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了

key：是一个可选的唯一标识符，通过给组件设置一个独一无二的键，并确保它在一个渲染周期中保持一致，使得React能够更只能地决定应该重用一个组件还是销毁并重建一个组件，进而提高渲染性能。例如：
var Hello3=React.createClass(
render:function()
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>

);

二、React组件生命周期详解
组件本质上就是状态机，输入确定，输出一定确定。状态和结果一一对应，从而使程序变得直观。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态,但是事件与事件之间互相独立，但是不同状态之间可能会互相影响。
组件的所有状态结合起来就成了组件的生命周期。即：初始化阶段->运行中阶段->销毁阶段。

不同生命周期内可以自定义的函数
初始化阶段：
①getDefaultProps:获取默认属性，只调用一次，是在createClass之后调用的。实例之间共享引用
②getInitialState:初始化每个实例的特有初始化状态
③componentWillMount:mout就是装载的意思，这个方法的意思就是说组件即将被装载到页面中，也是render之前最后一次修改状态的机会
④render:组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上。只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidMount:组件被装载后才会被调用，也就是说调用这个方法的时候，组件已经被渲染到了页面上，这个时候可以修改DOM
这五个函数的执行顺序就是从上到下的。需要注意的是getDefaultProps只会在组件的第一个实例被初始化的时候被调用，也就是说第二个实例之后都是从getInitialState开始调用。同一个组件的所有实例的默认属性都是一样的。
主要测试代码：<script type="text/babel">
var Hello=React.createClass(
getDefaultProps:function()
console.log("getDefaultProps, 1");
,
getInitialState:function()
console.log("getInitialState, 2");
return null;
,
componentWillMount:function()
console.log("componentWillMount, 3");
,
render:function()
console.log("render, 4");
return <p>Hi,LuckyWinty!</p>
,
componentDidMount:function()
console.log("componentDidMount, 5");
,
);
React.render(<Hello></Hello>,document.body);
</script>

①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的，或者是父组件的属性发生变化时，属性在传送到组件之前，开发者有机会通过这个函数去处理属性。比如修改，更新内部状态等。
②shouldComponentUpdate：当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数，也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下，手动使shouldComponentUpdate返回false，这样react就不需要再经过render和diff算法去判断是否要更新，从而提高性能。
③componentWillUpdate：render触发之前触发，更新组件，不能修改属性和状态
④render：组件在render函数生成虚拟节点，最后由react将虚拟节点变成真正的节点渲染到页面上，只能访问this.props和this.state，只有一个顶层组件，最好不要修改状态和DOM输出。
⑤componentDidUpdate：render之后，真正的DOM被渲染之后调用

react.js map 怎么获得索引值

参考技术A const bordercolors=["red", "blue", "yellow"]
bordercolors.map((value, index)=>
<option key=index>index:value</option>
)本回答被提问者采纳