本篇文章给大家带来的内容是关于react组件如何编写？（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
如何编写一个React组件
在React的世界里，通常是用class来声明一个组件的，它必须继承自React.Component。
例如下面的代码：
// MyFirstComponent.jsxclass MyFirstComponent extends React.Component { state = { text: "Hello React" }; /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */ componentDidMount() { alert("组件挂载完成！"); } render() { return ( {this.state.text}, I am {this.props.author}!
) }}export default MyFirstComponent;
登录后复制
// index.jsimport MyFirstComponent from "MyFirstComponent";/** 渲染结果：Hello React, I am Shaye!
*/ReactDOM.render(, document.getElementById("app"));
登录后复制
以上就是一个常规的React组件编写方式，不过我们还可以通过观察上面的代码，发现几个有趣的地方：
MyFirstComponent中有一个函数componentDidMount是组件生命周期钩子函数。实际上React为组件设计了一系列的生命周期钩子函数
MyFirstComponent中有一个特别的函数render()，这个函数把类似html的模板内容jsx作为返回值。这是一个必须定义的函数，否则React将抛出错误
jsx乍看之下像是一种模板引擎，实际上是一种JavaScript的语法扩展，它的核心理念就是著名的all in js，它完全是在JavaScript内部实现的，它和传统的模板引擎一样，也可以绑定js表达式
jsx绑定的数据可以很明显地看出来自两个对象：this.state和this.props；this.state是MyFirstComponent内部自定义的组件状态；this.props是外部凭借标签属性的形式传进MyFirstComponent内部的数据，类似于函数的传参；
总结来说，当你掌握了 组件生命周期 JSX 组件状态state 组件属性props ，你就知道该如何编写React组件了。
组件生命周期
官方文档已经有非常详尽的介绍，这里不再赘述，请点击这里查看组件生命周期的官方文档。
JSX
你可以任意地在JSX当中使用javaScript表达式，在JSX当中的表达式要包含在大括号里。
例如下面的代码：
{this.state.content} forever
登录后复制
JSX里的React元素，比如p，最终都会被编译器转译，被某些特定函数处理变成一个轻量的javascript object。比如上面提到的元素p最终会变成如下的object：
// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）const pElement = { type: "p", props: { // this.state.clname的值 className: "love", style: { fontSize: "20px" }, // "you"为this.state.content的值 children: ["you", "forever"] }}
登录后复制
React就是通过读取这些对象来操作DOM并保持数据内容一致。所以，实际上你依然在写js。所以，class和style必须使用在js中的写法
比如:class => className
再比如：font-size: 20px; => { fontSize: “20px” }
特别地，React元素的属性仍然可以像原生html一样使用引号来定义以字符串为值的属性，例如：className=”my-claname”
除了以上所提，JSX的事件绑定与原生html也有一些语法上的不同：
React的事件命名采用驼峰式写法，而不是小写。
React事件绑定的必须是一个函数对象，不能是字符串。
代码示例：
我是一个按钮
// 也可以向事件回调函数传递参数this.handleClick(params)}>我是一个按钮
登录后复制
组件状态state
state是私有的，完全受控于当前组件。既然是状态，那么就会有更新的需求，如何更新呢？
代码示例：
// 对`this.state`或者它的属性直接`=`赋值，将永远不会触发组件渲染，必须使用`setState()`// 在组件的生命周期钩子函数中调用this.setState()componentDidMount() { this.setState({ content: "lalalala" })}// 在组件的自定义函数中调用this.setState()handleClick = () => { this.setState({ content: "uauauaua" })}
登录后复制
setState()是React中唯一一个动态更新组件的途径，当它被调用之后，自身组件以它的所有子组件都将触发重渲染
特别地，state同样也可以作为属性传递给子组件；
setState()详细文档
组件属性props
props是父组件传递下来的数据，一般是来自父组件的state或者组件的其他成员变量。并且，props是只读的，组件永远无法修改自己的props。只有在父组件调用setState()之后才能使子组件的属性发生变化并重新渲染。
props只能从上往下传，组件也只能修改自身私有的state，意味着整个应用的数据流只能是自上往下的单向数据流
总结
组件生命周期 JSX 组件状态state 组件属性props 再加上一个自上而下的单向数据流，这些便是React组件最基本的特点了吧！
相关推荐：
React高阶组件应如何使用
在React组件中的this如何使用
以上就是React组件如何编写？（代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2741134.html
